PAGE 05 · NAVIGATION

Navigation

Top nav for site-level wayfinding, side nav for in-product/section structure, tabs for sibling views, breadcrumbs for parental context, pagination for long lists, footer for site map. One primary nav per view — never two.

01.

Top navigation

64px high, sticky on scroll, hairline divider.

Top nav · default
02.

Side navigation

For multi-step flows (assessment) or product sections (dashboard).

Side nav · in self-assessment flow

Disclosure (Grade 0)

Eight questions about how your organisation makes the use of AI publicly known.

03.

Breadcrumbs

Show parental hierarchy. Last item is current and not a link.

Breadcrumbs
Registry/Visit Stockholm/Grade 2 certificate
04.

Tabs

Two styles: underline (default) and pill (compact / inline).

Tab variants
UNDERLINE
Overview
Methodology
Examples
FAQ
PILL
All grades
Grade 0
Grade 1
Grade 2
Grade 3
05.

Pagination

For long-form lists. Always show first, last, and current ±2.

Pagination
06.

Footer

Site map, legal, contact, copyright. Dark surface, four columns desktop.

Footer · default