Skip to main content

Tertiary navigation

Last updated:
1/25/2024

Tertiary navigation is a group of jump links that allow the user to quickly see and navigate to relevant sections of content on a page.

View in Storybook

Usage

Do:

  • Add tertiary navigation to any detail page or page that has more than two h2s
  • Ensure that the tertiary navigation text passes contrast requirements if using a background color
  • Split up content to separate pages if necessary

Don't:

  • Add tertiary navigation to a landing page or any page that has less than two h2s
  • Put the tertiary navigation on dark color backgrounds
  • Put dissimilar content on the same page

Content guidelines

Do:

  • Structure your content with correct heading structure
  • Make sure your h2 headings are descriptive, clear, and concise

Don't:

  • Assign h2s to content that shouldn’t be an h2 so that content appears in the tertiary navigation — the tertiary navigation should follow the heading structure
  • Add icons to headings

User research

Key takeaways

Consider page content

Before adding tertiary navigation to a page, make sure that the page content belongs on one page or the same page. Consider splitting content up into separate pages if the page sections are dissimilar or if the user doesn’t need to read all page sections in a particular order.

Differentiate the jump link section

Make sure that the jump link section is recognizable and is labeled clearly. The jump link text should be clear and match the page section headings. The jump link style should be different than other page links. In our case, we are matching the jump link style to our navigational link style for consistency across our navigation components.

MERGE — Monarch Round 2 prototype testing results, Feb 2022

Nielsen Norman Group — Anchors OK? Re-Assessing In-Page Links

Accessibility

This component passes AA WCAG standards. However, changes made by the content owner or implementer could impact accessibility compliance. Be sure to follow code standards and content guidelines to ensure that the link is fully accessible.

For more information, see WAI-ARIA Authoring Practices for the link pattern and Deque’s screen reader keyboard shortcuts and gestures documentation.