All navigation must be keyboard accessible and include ARIA tags.
- Use the
<nav>element for navigation controls.
- Use the given state classes to show which page the user is on.
- Use short navigation links. They don’t have to be the full page title.
- Test with users to ensure the navigation hierarchy is not too long or too deep.
- Use the correct colour contrast for breadcrumbs and inline links.
Use site navigation to help the user to navigate between main sections.
HTML for Site navigation
Guidance for site-navigation
- The menu will collapse by default on small screens.
Use local navigation to help users go straight to the specific content that meets their needs.
HTML for Local navigation
Guidance for local-navigation
- Local navigation appears in the left sidebar.
- The section title link is always at top, followed by 2 levels of navigation (sub-section and page).
class="is-active"to show where the user is.
Table of contents
Use contents links (index links) to help the user scan the page.
Example of Table of contents
HTML for Table of contents
Guidance for table-of-contents
- Make sure you use the correct header level.
- Users with modern browsers will see a smooth scroll down the page.
Provide skip links to navigation and content.
Skip links are not visual until they receive focus.
To show the skip links example:
- Move focus to this link by clicking it
- Press Tab to show ‘Skip to main content’ then ‘Skip to local content’ links.
HTML for Skip links
Guidance for skip-links
Include skip links between the opening of the
<body> and the page
Breadcrumbs help users understand where they are in the service and how they got there.
HTML for Breadcrumbs
Guidance for breadcrumbs
Breadcrumbs show under the page header or hero from
$tablet breakpoint upwards.
Footers help users who reach the bottom of a page without finding what they want.
HTML for Footer navigation
Guidance for footer-navigation
UI-Kit uses CSS Flexboxes to provide a horizontal list of links:
- 2 columns for
- 4 columns for