Global Sidebar Navigation

The navigation components are lists of links that allow users to move throughout the application. Both the primary and secondary navigation display in the sidebar.

Variants

Main Nav

Collapsed and expanded states are shown here.

Toggle dark mode

Subnav

Collapsed and expanded states are shown here.

Toggle dark mode

HTML

<div id="sidebar">
  <!-- Primary -->
  <nav id="sidebar-global" class="collapsed">
    <ul id="sidebar-global-primary" class="menu active"></ul>

    <ul id="sidebar-global-secondary" class="menu active"></ul>
  </nav>

  <!-- Subnavs -->
  <nav id="sidebar-contextual" class="sidebar__nav sidebar-contextual">
    <ul id="sidebar-contextual-users" class="menu sidebar-contextual__list active">
      <div class="menu-title">Users</div>

      …
    </ul>
  </nav>

  <div id="sidebar-toggle" class="">
    <button type="button" aria-expanded="true" aria-label="Toggle navigation" class="tip-right" title="" data-original-title="Collapse">
      <svg class="icon icon-14" aria-hidden="true">
        <use xlink:href="/assets/svg/solid.svg#angle-left"></use>
      </svg>
    </button>
  </div>

  <div id="sidebar-overlay"></div>
</div>

Name	Description	Class	Copy
Active	class to add to li to show “active” state	active	activeCopy to Clipboard
Shake	Shake animation (on hover) for button containing the notification icon	contains-bell	<button id="sidebar-global-messages" class="tip-right contains-bell" data-toggle="modal"> <svg class="icon" aria-hidden="true"><use xlink:href="/assets/svg/solid.svg#icon-bell"></use></svg> <span>Notifications</span> </button>Copy to Clipboard
Has badge	Append a badge to show notification count	badge badge-alert badge-pill	<button id="sidebar-global-messages" class="tip-right contains-bell" data-toggle="modal"> <svg class="icon" aria-hidden="true"><use xlink:href="/assets/svg/solid.svg#icon-bell"></use></svg> <span class="badge badge-alert badge-pill>99+</span> <span>Notifications</span> </button>Copy to Clipboard

Navigation item

Link

Toggle dark mode

<li>
    <button id="" title="">
        <svg>…</svg>
        <span class="badge badge-alert badge-pill>…</span>
        <span>…</span>
    </button>
</li>

Subheader

Collapsed and expanded states are shown here.

Toggle dark mode

<ul id="sidebar-contextual-id" class="menu sidebar-contextual__list">
  <div class="menu-title">…</div>
</ul>

Divider

Collapsed and expanded states are shown here.

Toggle dark mode

<ul id="sidebar-contextual-id" class="menu sidebar-contextual__list">
  <li>…</li>
  <hr />
  <li>…</li>
</ul>

In Practice

The main nav and sub nav sidebars have some key differences explained below.

Main Navigation

The main nav is collapsed (only icons are shown) by default. It expands to show the text labels on hover. Main nav has two slots for content items:

• Primary slot
  • Product logo
  • Nav items
  • Dividers as needed
• Secondary slot
  • Nav items
  • Notifications
  • Avatar

Sub Navigation

The sub nav is dependent on the main nav; its content is based on the selection made in the main nav. The sub nav sidebar always displays along with the main nav and is expanded (shows icons and text labels) by default. The option to collapse is displayed to the user on hover.

Contents include:

• Subheaders
• Nav links
• Dividers as needed

Accessibility

Navigation should be operable using the keyboard alone. All navigation contents should be announced by screen readers.

For more information, see our accessibility guidelines.

Design resources

View component in Figma