Skip to main content

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.
It is strongly recommended that a website has a Menu in place.
Consider ways to simplify the navigation. Use Sidebar Navigation only if necessary.

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#

<div class="bux-container bux-container--sidebar-nav">
<nav id="sidebar-nav" aria-label="Sidebar Navigation" class="disclosure-nav disclosure-nav-orientation-vertical">
<ul class="bux-sidebar-nav">
<li class="bux-sidebar-nav__item">
<a href="#" class="bux-sidebar-nav__link bux-sidebar-nav__link--active disclosure-nav-item-with-submenu">Item 1</a>
<ul class="disclosure-nav-submenu disclosure-nav-submenu-closed">
<li class="bux-sidebar-nav__item">
<a href="#" class="bux-sidebar-nav__link disclosure-nav-item-with-submenu">Item 1.1</a>
<ul class="disclosure-nav-submenu disclosure-nav-submenu-closed">
<li class="bux-sidebar-nav__item">
<a href="#" class="bux-sidebar-nav__link">Item 1.1.1</a>
<ul class="disclosure-nav-submenu disclosure-nav-submenu-closed">
<li class="bux-sidebar-nav__item">
<a href="#" class="bux-sidebar-nav__link disclosure-nav-item-with-submenu">Item 1.1.1.1</a>
<ul class="disclosure-nav-submenu disclosure-nav-submenu-closed">
<li class="bux-sidebar-nav__item">
<a href="#" class="bux-sidebar-nav__link">Item 1.1.1.1.1</a>
</li>
<li class="bux-sidebar-nav__item">
<a href="#" class="bux-sidebar-nav__link">Item 1.1.1.1.2</a>
</li>
<li class="bux-sidebar-nav__item">
<a href="#" class="bux-sidebar-nav__link">Item 1.1.1.1.3</a>
</li>
<li class="bux-sidebar-nav__item">
<a href="#" class="bux-sidebar-nav__link">Item 1.1.1.1.4</a>
</li>
</ul>
</li>
<li class="bux-sidebar-nav__item">
<a href="#" class="bux-sidebar-nav__link">Item 1.1.1.2</a>
</li>
<li class="bux-sidebar-nav__item">
<a href="#" class="bux-sidebar-nav__link">Item 1.1.1.3</a>
</li>
<li class="bux-sidebar-nav__item">
<a href="#" class="bux-sidebar-nav__link">Item 1.1.1.4</a>
</li>
</ul>
</li>
<li class="bux-sidebar-nav__item">
<a href="#" class="bux-sidebar-nav__link">Item 1.1.2</a>
</li>
<li class="bux-sidebar-nav__item">
<a href="#" class="bux-sidebar-nav__link">Item 1.1.3</a>
</li>
<li class="bux-sidebar-nav__item">
<a href="#" class="bux-sidebar-nav__link">Item 1.1.4</a>
</li>
</ul>
</li>
<li class="bux-sidebar-nav__item">
<a href="#" class="bux-sidebar-nav__link">Item 1.2</a>
</li>
<li class="bux-sidebar-nav__item">
<a href="#" class="bux-sidebar-nav__link">Item 1.3</a>
</li>
<li class="bux-sidebar-nav__item">
<a href="#" class="bux-sidebar-nav__link">Item 1.4</a>
</li>
</ul>
</li>
<li class="bux-sidebar-nav__item">
<a href="#" class="bux-sidebar-nav__link disclosure-nav-item-with-submenu">Item 2</a>
<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">Item 2.3</a>
</li>
<li class="bux-sidebar-nav__item">
<a href="#" class="bux-sidebar-nav__link">Item 2.4</a>
</li>
</ul>
</li>
<li class="bux-sidebar-nav__item">
<a href="#" class="bux-sidebar-nav__link">Item 3</a>
</li>
<li class="bux-sidebar-nav__item">
<a href="#" class="bux-sidebar-nav__link disclosure-nav-item-with-submenu">Item 4</a>
<ul class="disclosure-nav-submenu disclosure-nav-submenu-closed">
<li class="bux-sidebar-nav__item">
<a href="#" class="bux-sidebar-nav__link">Item 4.1</a>
</li>
<li class="bux-sidebar-nav__item">
<a href="#" class="bux-sidebar-nav__link">Item 4.2</a>
</li>
<li class="bux-sidebar-nav__item">
<a href="#" class="bux-sidebar-nav__link">Item 4.3</a>
</li>
<li class="bux-sidebar-nav__item">
<a href="#" class="bux-sidebar-nav__link">Item 4.4</a>
</li>
</ul>
</li>
<li class="bux-sidebar-nav__item">
<a href="#" class="bux-sidebar-nav__link">Item 5</a>
</li>
</ul>
</nav>
</div>

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

Accessibility#

When 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>

References#