Overview
The side navigation menu is a list of links that is used for website navigation. The side navigation can provide a multi-level structure.
When to Use
- To display a navigational hierarchy with one to three levels.
- To display the “sub-navigation” within a section of the website. This pattern will commonly appear within Agency subpages, for example.
When Not to Use
- Small site. If the site has fewer than five pages, consider organizing the page without a navigational hierarchy.
Formatting
Anatomy
The side navigation contains secondary navigation and is positioned below the hero section and fixed to the left. Both links and sub-menus can be used in the side navigation and may be mixed together.
- Header - Clickable link that serves as a heading for the links below. As this component often serves as the "sub-navigation" for agency pages, this label will usually be the respective agency's name and direct users to the agency landing page.
- Link
- Sub-Menu - Includes a link and a chevron icon button which expands the sub-menu to reveal additional sub-menus or links. The side navigation is designed to support up to three tiers of navigation.
- Selected Link - indicates current page being displayed.
Sub-Menus
Sub-menus include both a link and a chevron icon button which expands the sub-menu to reveal additional sub-menus or links. Please refer to the Link and Icon Button documentation for more details.
Behaviors
Use the side navigation if there are more than five secondary navigation items, or if you expect a user to switch between secondary items frequently. Sub-menus are denoted with a chevron and expand when clicked, pushing the other items down in the panel. To collapse the sub-menu, the user must again click the menu header in the left panel.
States
All levels of Sub-Menus share the same styles for different states. The only difference between the various node tiers is the left padding for each menu level.
Selection Indicator
If the parent node of a selected child node is collapsed, the parent node should inherit the selected state so the user does not lose the context of what is selected, even if it is out of view.
Sticky Behavior
The Side Navigation is sticky to allow users to quickly access other pages within a section of the website while scrolling the page.
Smaller Breakpoints
The side navigation changes to a dropdown on Small and X-Small breakpoints. The dropdown sticks to the top of the page and pushes the Header out of view. When the user scrolls up the Header re-appears and pushes the side navigation down.