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.
to your landing page link to indicate the landing page. Use
class on your link to indicate the current page if the page is
You can review a working example of this on our website. The Get started section goes 3 levels deep.
- Go to Get started .
- From the side navigation, select CSS classes shortcuts.
- Then select Utility CSS classes.
For an example that has 6 levels, review our live example.
With landing page
With sublanding page selected.
With page under the sublanding page selected.
To add accordion functionality to your side navigation use
tag with class
. If you want your accordion to be open on default use attribute
tag. You can also use class
tag to indicate current page.
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 can help visitors navigate through lots of content. It complements site navigation (doesn’t replace it).
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: