DTA Design Guide Navigation

Make sure users understand where they are in the service, where they have been and where they can go.

Building navigation

All navigation must be keyboard accessible and include ARIA tags.

Back to contents ↑

Use site navigation to help the user to navigate between main sections.

Example of Site navigation

Guidance for site-navigation
  • The menu will collapse by default on small screens.
  • Older browsers (IE8 and lower) and those without JavaScript will get an expanded menu.
Back to contents ↑

Local navigation

Use local navigation to help users go straight to the specific content that meets their needs.

Example of 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).
  • Use class="is-active" to show where the user is.
Back to contents ↑

Table of contents

Use contents links (index links) to help the user scan the page.

Example of 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.
Back to contents ↑

Provide skip links to navigation and content.

Skip links are not visual until they receive focus.

To show the skip links example:

  1. Move focus to this link by clicking it
  2. Press Tab to show ‘Skip to main content’ then ‘Skip to local content’ links.
Guidance for skip-links

Include skip links between the opening of the <body> and the page <header>.

Back to contents ↑

Breadcrumbs help users understand where they are in the service and how they got there.

Example of Breadcrumbs

Breadcrumbs

Inverted breadcrumbs

Guidance for breadcrumbs

Breadcrumbs show under the page header or hero from $tablet breakpoint upwards.

Back to contents ↑

Footers help users who reach the bottom of a page without finding what they want.

Guidance for footer-navigation

UI-Kit uses CSS Flexboxes to provide a horizontal list of links:

  • 2 columns for $mobile and $tablet breakpoints
  • 4 columns for $desktop breakpoint.