Side Navigation

The side navigation bar is used to display the secondary navigation elements of an application. These include a list of links that can be used to move between sections or pages within the application or the site.

• Interactive Playground
• Anatomy
• States
• Behavior
• Specs
• Keyboard Interactions
• Related Content

The Interactive Playground allows you to experiment with various list styles and features. Once you get the results you want, copy the HTML or React code provided and paste it into your application.

<div
  id=":R0:"
  class="neo-leftnav--wrapper"
>
  <nav
    class="neo-leftnav"
    aria-label="Main Navigation"
  >
    <ul class="neo-leftnav__nav">
      <li
        id=":Rb:"
        class="neo-leftnav__main"
      >
        <button
          class="neo-leftnav__category expandable neo-btn-secondary--info neo-btn"
          tabindex="-1"
          aria-label="Accounts"
        >
          Accounts
        </button>
        <ul class="neo-leftnav__nav">
          <li class="neo-leftnav__sub neo-leftnav__sub--active">
            <a
              href="#/1"
              style="padding:8px 28px 8px 20px"
              tabindex="-1"
            >
              Account
            </a>
          </li>
          <li class="neo-leftnav__sub">
            <a
              href="#/2"
              style="padding:8px 28px 8px 20px"
              tabindex="-1"
            >
              Business Rules
            </a>
          </li>
          <li class="neo-leftnav__sub">
            <a
              href="#/3"
              style="padding:8px 28px 8px 20px"
              tabindex="-1"
            >
              Contact Centers
            </a>
          </li>
        </ul>
      </li>
      <li
        id=":Rj:"
        class="neo-leftnav__main"
      >
        <button
          class="neo-leftnav__category expandable neo-btn-secondary--info neo-btn"
          tabindex="-1"
          aria-label="Analytics"
        >
          Analytics
        </button>
        <ul class="neo-leftnav__nav">
          <li class="neo-leftnav__sub">
            <button
              class="neo-btn neo-btn--default neo-btn-tertiary neo-btn-tertiary--default"
              data-badge
              disabled
              style="padding:8px 28px 8px 20px"
              tabindex="-1"
            >
              Dashboard
            </button>
          </li>
          <li class="neo-leftnav__sub">
            <button
              class="neo-btn neo-btn--default neo-btn-tertiary neo-btn-tertiary--default"
              data-badge
              disabled
              style="padding:8px 28px 8px 20px"
              tabindex="-1"
            >
              Usage Report
            </button>
          </li>
        </ul>
      </li>
      <li class="neo-leftnav__main">
        <a
          href="#settings"
          class="neo-icon-settings"
        >
          Settings
        </a>
      </li>
    </ul>
  </nav>
</div>

<SideNavigation
  aria-label="Main Navigation"
  currentUrl="#/1"
>
  <NavCategory
    expanded
    icon="contact"
    label="Accounts"
  >
    <LinkItem href="#/1">
      Account
    </LinkItem>
    <LinkItem href="#/2">
      Business Rules
    </LinkItem>
    <LinkItem href="#/3">
      Contact Centers
    </LinkItem>
  </NavCategory>
  <NavCategory
    icon="analytics"
    label="Analytics"
  >
    <LinkItem href="#/4">
      Dashboard
    </LinkItem>
    <LinkItem href="#/5">
      Usage Report
    </LinkItem>
  </NavCategory>
  <TopLinkItem
    href="#settings"
    icon="settings"
    label="Settings"
  />
</SideNavigation>

Side navigation is a user interface element located on the left or right side of a website or application. It contains a list of links that allow users to move between different sections or pages within the site or app.

• Fully Expanded:

  The side navigation panel appears within this container when maximized.

• Active:

  The colored bar shows which of the menu groups is selected.

• Collapse Chevron:

  Close this menu group and show only the title (see #7).

• Active Dot Indicator:

  The colored dot shows the current location within the application for the second level of navigation.

• Icon:

  This optional component is used to provide a visual representation of the function of that menu group. All items should have an icon, or none should.

• Label:

  Provide a brief text description of the location linked to the item.

• Expand Chevron:

  Open this menu group and show all the items it contains. (see #3).

• Condensed:

  When the side navigation bar is minimized, it appears as a narrow strip with only the icons showing. Items without icons will not be visible in the condensed sidebar.

• Expand/Condense Navigation Bar:

  Use this icon to maximize and minimize the sidebar.

Side navigation can have different states depending on user actions and the design of the website or application.

Default

Hover

Active

Disabled

• Default:

  This is the rest state for side navigation items. When nothing else is happening, it adopts this state (sometimes called "Up").

• Hover:

  When the user moves the mouse over the item, or when it becomes the focus using the keyboard, its state changes to Hover. This lasts until the user moves off the item. While in the Hover state, use the Enter key, the Spacebar or click the mouse button to navigate to the specified location.

• Active:

  While the side navigation option is selected, it is displayed in the Active state.

• Disabled:

  This shows that the side navigation item cannot be used. It may require an action to be taken first before it becomes actionable.

A side navigation can have various behaviors that determine how it interacts with the user and the rest of the website or application. The following examples show several implementations of the side navigation bar.

Icons

This side navigation uses icons for the top-level items only. Do not add icons to sub-menu items.

Here we show side navigation without icons.

DO: Use consistent treatment within the side navigation. If a sidebar is to be condensable, then icons are required for the top-level items only.

DON'T: Do not add icons to only some options, and do not use them solely for decoration.

DO: Use the correct styling for sub-menu items so the active indicator aligns with the main sections.

DON'T: Do not mix sub-menu item styles.

Condensed

A condensed side navigation, also known as a compact sidebar, is a user interface element that takes up less space when compared to the normal view. A condensed side navigation displays only the icons to reduce the width of the sidebar. Items without icons will not appear in a condensed sidebar.

In smaller screens, the side navigation can be expanded and appears in front of the main page content.

DO: Provide a condensed navigation option within applications that use icons.

DON'T: Do not use condensed side navigation when only text is used.

Text Wrap

For side navigation, use text wrapping where necessary to ensure that the content on the main window does not overlap with the navigation menu making it difficult for users to read.

DO: Use concise labels in the navigation bar. They can be shorter than the page title if needed with the text wrapping to fit the space available.

DON'T: Do not truncate the labels with an ellipsis. Wrap it onto another line.

Scrolling

Include a scroll bar when there are more items in the side navigation than will fit on the screen. This should include a provision for expanding the top-level menu items to show sub-menus.

Items in a side navigation should have the padding values shown below.

Accessibility requires that each item on the screen is reachable using the keyboard alone. The mouse is not always an option for some users.

Keyboard navigation employs the following shortcuts.