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 hierachically above the page frame.

Required

Example

With icon

HTML React Web Component 
<nav class="sidenav sgds list-unstyled open1">
    <li class="sidenav-item">
        <button class="sgds 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 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="sgds 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="sgds 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>
</nav>
 View on React storybook View on Web component storybook

With no icon

HTML React Web Component 
<nav class="sidenav sgds list-unstyled open2">
    <li class="sidenav-item">
        <button class="sgds 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="sgds 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="sgds 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>
</nav>
 View on React storybook View on Web component storybook

Anatomy

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

Spacing

Side Navigation Spacing 1

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

Side Navigation Spacing 2

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

Usage guidelines

Side navigation should be used when

  1. There are many sub pages under the selected section in the main menu. The side navigation will make it easy to scale and add on more options.

Side navigation should not be used when

  1. There are only a few navigation items, a side navigation may be unnecessary and create a cluttered layout. In such cases, a top navigation or a simple dropdown may be more efficient.

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;
Last updated 02 October 2024
Home
Latest version 2.3.5