Side Navigation

The side navigation is used to display a list of links to move between pages within a related category. It is used as a secondary form of navigation where the primary navigation is located hierarchically above the page frame.

Required

Example

With icon 

 
<nav class="sidenav cgds list-unstyled open1" aria-label="side-navigation menu">
  <ul>
    <li class="sidenav-item">
      <button class="cgds btn collapsed active" type="button" data-bs-toggle="collapse"
              data-bs-target="#collapseExampleA" aria-expanded="false" aria-controls="collapseExampleA">
        <i class="bi bi-layers"></i>Sub menu
        <i class="bi bi-chevron-down"></i>
      </button>
      <div class="collapse show" id="collapseExampleA" data-bs-parent=".open1">
        <ul class="list-unstyled">
          <li><a href="#" class="nav-link">Sub menu item</a></li>
          <li><a href="#" class="nav-link">Sub menu item</a></li>
        </ul>
      </div>
    </li>
    <li class="sidenav-item">
      <button class="cgds btn collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExampleB" aria-expanded="false" aria-controls="collapseExampleB">
        <i class="bi bi-layers"></i>Sub menu
        <i class="bi bi-chevron-down"></i>
      </button>
      <div class="collapse" id="collapseExampleB" data-bs-parent=".open1">
        <ul class="list-unstyled">
          <li><a href="#" class="nav-link">Sub menu item</a></li>
          <li><a href="#" class="nav-link">Sub menu item</a></li>
          <li><a href="#" class="nav-link">Sub menu item</a></li>
        </ul>
      </div>
    </li>
    <li class="sidenav-item">
      <button class="cgds btn collapsed" type="button" data-bs-toggle="collapse"
              data-bs-target="#collapseExampleC" aria-expanded="false" aria-controls="collapseExampleC">
        <i class="bi bi-layers"></i>Sub menu
        <i class="bi bi-chevron-down"></i>
      </button>
      <div class="collapse" id="collapseExampleC" data-bs-parent=".open1">
        <ul class="list-unstyled">
          <li><a href="#" class="nav-link">Sub menu item</a></li>
          <li><a href="#" class="nav-link">Sub menu item</a></li>
          <li><a href="#" class="nav-link">Sub menu item</a></li>
        </ul>
      </div>
    </li>
  </ul>
</nav>

With no icon 

 
<nav class="sidenav cgds list-unstyled open2" aria-label="side-navigation menu">
  <ul>
    <li class="sidenav-item">
      <button class="cgds btn collapsed active" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExampleD" aria-expanded="false" aria-controls="collapseExampleD">
        Sub menu
        <i class="bi bi-chevron-down"></i>
      </button>
      <div class="collapse show" id="collapseExampleD" data-bs-parent=".open2">
        <ul class="list-unstyled">
          <li><a href="#" class="nav-link">Sub menu item</a></li>
          <li><a href="#" class="nav-link active">Sub menu item</a></li>
          <li><a href="#" class="nav-link">Sub menu item</a></li>
        </ul>
      </div>
    </li>
    <li class="sidenav-item">
      <button class="cgds btn collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExampleE" aria-expanded="false" aria-controls="collapseExampleE">
        Sub menu
        <i class="bi bi-chevron-down"></i>
      </button>
      <div class="collapse" id="collapseExampleE" data-bs-parent=".open2">
        <ul class="list-unstyled">
          <li><a href="#" class="nav-link">Sub menu item</a></li>
          <li><a href="#" class="nav-link">Sub menu item</a></li>
          <li><a href="#" class="nav-link">Sub menu item</a></li>
        </ul>
      </div>
    </li>
    <li class="sidenav-item">
      <button class="cgds btn collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExampleF" aria-expanded="false" aria-controls="collapseExampleF">
        Sub menu
        <i class="bi bi-chevron-down"></i>
      </button>
      <div class="collapse" id="collapseExampleF" data-bs-parent=".open2">
        <ul class="list-unstyled">
          <li><a href="#" class="nav-link">Sub menu item</a></li>
          <li><a href="#" class="nav-link">Sub menu item</a></li>
          <li><a href="#" class="nav-link">Sub menu item</a></li>
        </ul>
      </div>
    </li>
  </ul>
</nav>

Anatomy

Side Navigation Anatomy
  1. Indicator: Used when it is active, this allows the user to know what page/item they are on.
  2. Submenu label (expanded): Serve to tell the user what the page is about.
  3. Icon (situational): Used when there are submenu items to indicate that submenu can be expanded or collapsed.
  4. Submenu item label: Serve to tell the user what the item is about.

Spacing

Side Navigation Spacing 1

Within the submenu item
Ensure that there is a min 32px horizontal spacing between dropdown items.

Side Navigation Spacing 2

Within & outside the submenu
Ensure that there is a min of 16px spacing between label and icon/indicator.

Usage guidelines

Side navigation should be used when

  • For websites with a deep information architecture or lots of categories/subpages, a side nav provides an easy way to navigate through the sections.

Side navigation should not be used when.

  • There are not many navigation options in the selected section.

Usability guidelines

Highlight the current section
Show users where they are by highlighting it in the side navigation, so they know which section they are currently in.

Use straightforward labels
Labels should be clear to your users. You should avoid jargon or unfamiliar terms that users cannot understand.

Side navigation design tokens

$sidenav-color: $primary !default;
$sidenav-fontsize: 1rem !default;
$sidenav-width: auto !default;
$sidenav-item-spacing: 1rem !default;
$sidenav-btn-border-width: $navbar-border-bottom-height !default;
$sidenav-btn-padding-x: 0.5rem;
$sidenav-btn-padding-y: 0.5rem;
Home
Previous version 1.0.3