Side navigation
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.
Single-level list
Add class 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.
Landing page
Multi-level list
Level 1a:
With landing page
selected.
Level 1b:
With sublanding page selected.
Level 2:
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
Accordion list
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
current page.
Scroll bar
This built-in feature only activates when side navigation is longer than the current viewport area.
Usage
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.
Multi-level behavior
- 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.
Accessibility
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