Other names: Left navigation, side menu
The side navigation menu allows visitors to find related pages within a topic. It provides a deeper level of navigation for larger websites. Selecting a side menu item will take the visitor to that page.
landing to your landing page link to indicate the landing page. Use
active class on your link to indicate the current page if the page is currently open.
With landing page
With sublanding page selected.
With page under the sublanding page selected.
In Level 2 example in addition to
landing class add class
back to your
sublanding page link
to add back arrow icon. Don't use
back class if the page is current.
Page 4 section landing
To add accordion functionality to your side navigation use
cagov-accordion tag with class
sidenav. If you want your accordion to be open on default use attribute
open in your
details tag. You can also use class
active in your
summary tag to indicate
This built-in feature only activates when side navigation is longer than the current viewport area.
When and how to use it
The side navigation component helps visitors find pages within a website. It complements site navigation. It helps visitors scan and choose the content they need.
Use this component when:
- Visitors need to navigate between multiple pages within a website
- Top level navigation isn’t enough to support your site hierarchy
Use single level when navigation is simple and direct.
Use multi-level when there are a lot of pages and/or hierarchical.
How not to use it
When possible, avoid complex and deep navigation menus.
Do not go more than 2 levels deep. This makes the interaction simple for our visitors.
Do not link to pages outside of the parent website. You can do that within content.
- A multi-level side menu will start with a single level list of parent pages.
- When you select a parent page with children, the same menu displays. It also displays links to the children pages, which are indented under that item. This displays two levels of navigation.
- If a child page has subpages (grandchildren):
- The parent menu is gone
- The children items remain
- The grandchildren are added in
- A “back to” the parent menu link is added to the top of the menu
This logic can go as deep as needed, following this pattern.
Standard accessibility review
Each time a new component version is published:
- Test with the axe accessibility tool
- Review with the VoiceOver or NVDA screen reader
- Ensure all actionable elements are accessible by keyboard command and tab in a logical order
- Check the component layout on a variety of screen sizes