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
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