Secondary and tertiary navigation

Overview

Secondary and tertiary navigation components are typically used to:

• Navigate to related content: Quickly navigate between multiple pages related to the same topic or content.
• Quickly explore a long page: Jump to specific information within a long web page.
• Find additional information: Explore featured categories or topic areas with the ability to also find additional related information that is not featured.
• Find information using content hierarchy: Use the information architecture of the web site to navigate to parent information.

Use cases

The following table provides a summary of use cases for each secondary and tertiary navigation type. Visual examples of each navigation type are also provided.

Left rail navigation

The left rail navigation allows users to navigate between related pages for a topic and is limited to the following component:

• Parent-level page link - This the primary page introducing the topical section and is the top link of vertically stacked links aligned to the left of the main content.
• Child-level page links - These are links to the detail pages for the topic, below the parent-level page link and aligned to the left of the main content.
• Right chevron (optional) - Indicates when a detail page has detail pages of it's own.

Left rail navigation is always fixed/sticky for persistent access as the user scrolls the page. The current page is highlighted.

Horizontal jump tag navigation

The horizontal jump tag navigation allows users to jump to the headings of sections of the page they are viewing, and is limited to the following component:

• Anchor links - Link to section headings within the page

The active section of the navigation is highlighted as the user scrolls the page.

Horizontal Dropdown Navigation

The horizontal dropdown navigation includes:

• Inline links - Topic or category links.
• Drop down menu - “More” dropdown with links for overflow items.

The selected navigation item is visually highlighted.

Breadcrumbs

Breadcrumbs show content hierarchy and help users understand where they are, navigate back to previous levels, and maintain context while browsing. Breadcrumbs reflect the site's information structure, not the user's browsing history. The breadcrumb navigation is limited to the following component:

• Link trail - Displays as a horizontal trail of links separated by chevrons and ellipsis.

Structure

Breadcrumb trails display a maximum of three visible levels (not including the ellipsis).

• Breadcrumb trails display a maximum of three visible levels (not including the ellipsis)
• When there are four or more levels in the hierarchy, collapse the middle level(s) into an ellipsis (…)
• Example with 4+ levels: Level 1 > … > Parent > Current
• Example with 5+ levels: Level 1 > … > Parent > Current
• Breadcrumbs must remain on a single line
• If space is limited, truncate individual breadcrumb labels with an ellipsis after 55 characters
• The current page is given priority for space

This navigation always appears above the primary content of the page.  The last item is not clickable and represents the current page.

Left Rail Navigation

Horizontal Jump Tag Navigation

Horizontal Dropdown Navigation

Breadcrumbs

Customizable  elements

Secondary and tertiary navigation are flexible and allow for customization of content.  Below are the key components of the design for each type of navigation.

Left rail navigation

Horizontal jump tag navigation

Horizontal dropdown navigation

Breadcrumbs

Guidelines (do’s and don’ts)
‍

Do

• Use each navigation component only within its specified context.
• Ensure interactive states meet accessibility standards.
• Keep link labels short, clear, and relevant to the content structure.
• Test scroll behavior for jump tags and sticky rail performance.
• Match breadcrumb labels to page titles
• Reflect the site's information structure in breadcrumbs
• Provide clear focus indicators for keyboard navigation
• Keep breadcrumbs on a single line

Don't

• Have more than one LeftRail appearing per page
• Combine multiple secondary/tertiary navigation components on a single page. For example, do not combine in-page jump or anchor navigation with LeftRail navigation to avoid competing nav patterns.
• Use breadcrumbs or horizontal dropdown navigations outside of news, article or blog pages.
• Overload left rail or jump tag navigation with unnecessary items.
• Use default states without active styling—visual feedback is required.
• Show breadcrumbs on top-level landing pages (unless implementation requires it)
• Make the current page in a breadcrumb a clickable link
• Use breadcrumbs to show browsing history
• Allow breadcrumbs to wrap to multiple lines

Last updated