Sidebar Navigation
JSThis component requires JavaScript.
Component status:Beta
Sidebar Navigation compliments a Menu by displaying “sub-content” vertically on the left side of a webpage.
In addition to the default Menu, consider a sidebar menu if there is a large amount of content and/or if lower-level sections are closely related and users will need to quickly jump between them.
Sidebar navigation may contain Accordions that collapse and reveal nested links. When paired with the Menu, the Menu displays “Level 1” links, while the Sidebar Navigation displays “Level 2” links and deeper. These may be referred to as “child pages”.
#
Example#
Usage#
Dos- Use Sidebar Navigation if there is a large amount of content and/or if lower-level sections are closely related and users will need to quickly jump between them
- Use short, clear link text
- Limit to four levels deep of links – as in four child pages
- Keep the menu consistent among pages
- If possible, conduct usability tests and review analytics to confirm your site’s information architecture is meeting your audiences’ needs
#
Don’ts- Don't use if a website has little content and shallow hierarchy; consider the default Menu
- Don't use if a website has a moderate amount of content; consider a dropdown Menu in order to help users quickly preview lower-level content
- Don’t mix page links (links to unique pages) and anchor links (links to locations within a page) within a sidebar navigation because it will confuse the user
- Don’t nest links more than four levels deep – as in four child pages
#
AccessibilityWhen the current page is one of the link items in the navigation, that link should have the attribute-value pair aria-current="page"
added to the <a>
element.
#
Example:This code snippet is of a submenu where the browser is on page 2.3.html
.
<ul class="disclosure-nav-submenu disclosure-nav-submenu-closed">
<li class="bux-sidebar-nav__item">
<a href="#" class="bux-sidebar-nav__link">Item 2.1</a>
</li>
<li class="bux-sidebar-nav__item">
<a href="#" class="bux-sidebar-nav__link">Item 2.2</a>
</li>
<li class="bux-sidebar-nav__item">
<a href="#" class="bux-sidebar-nav__link" aria-current="page">Item 2.3</a>
</li>
<li class="bux-sidebar-nav__item">
<a href="#" class="bux-sidebar-nav__link">Item 2.4</a>
</li>
</ul>