Usage
On larger screens, the secondary navigation appears on the left side of the page. On smaller screens, the secondary navigation will roll up into a dropdown and appear at the top of the page.
Do:
- Show a section’s hierarchy with one to three levels
- Add an overview page if necessary
- Group pages with related content under a single page group
- Combine small amounts of content into another page, when possible, instead of adding navigation items
Don't:
- Extend a section’s hierarchy deeper than three levels
- Add navigation items for pages with small amounts of content — consider combining the content into another page if possible
- Add pages that don’t belong in that section’s menu
- Hide the secondary navigation if the site section has more than one page
- Use the secondary navigation component when there is only one page in the section
Content guidelines
Do:
- Match the navigation item text with it’s corresponding page’s breadcrumb text and h1
- Write navigation item text in sentence case
- Name page groups concisely and clearly
Don't:
- Write in title case or all caps
- Add icons
User research
Key takeaways
Vertical navigation
Organizing navigational links vertically allows for a variable number of links for different site sections. Vertical orientation also allows for better scanning and translates smoothly into smaller screens. This provides a consistent experience for users across viewports.
Study links
Primary sources (Boston Scientific user research)
MERGE — Monarch Round 2 prototype testing results, Feb 2022
Secondary sources
Accessibility
This component passes AAA 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 this component is fully accessible.
For more information, see the W3’s navigation example and notes and Deque’s screen reader keyboard shortcuts and gestures documentation.