Side navigation

A vertical list of links that shows the user their current position in the site hierarchy and enables them to navigate to other pages.

Section heading with single level navigation

Single level (or sibling) navigation shows only the pages on the same level of content hierarchy. This allows the user to navigate horizontally. It is ideal for a stepped process, or a journey along a path.

<nav class="nsw-sidenav" aria-labelledby="sksm726ns side navigation">
    <div class="nsw-sidenav__header">
      <h2 id="sksm726ns" class="nsw-sidenav__heading">
        <a href="#" class="nsw-sidenav__heading-link">Section heading</a></h2>
    </div>
    <ul class="nsw-sidenav__list nsw-sidenav__list--level-1">
        <li class="nsw-sidenav__list-item ">
          <a href="#" class="nsw-sidenav__link ">
            Sibling content
          </a>
        </li>
        <li class="nsw-sidenav__list-item ">
          <a href="#" class="nsw-sidenav__link ">
            Sibling content
          </a>
        </li>
        <li class="nsw-sidenav__list-item has-active-children">
          <a href="#" class="nsw-sidenav__link is-current" aria-current="page">
            Sibling content
          </a>
        </li>
        <li class="nsw-sidenav__list-item ">
          <a href="#" class="nsw-sidenav__link ">
            Sibling content
          </a>
        </li>
        <li class="nsw-sidenav__list-item ">
          <a href="#" class="nsw-sidenav__link ">
            Sibling content
          </a>
        </li>
    </ul>
  </nav>

 

Copy

Section heading with multiple levels of navigation

If you would like to allow the user to navigate down multiple levels of navigation in the same place, use this pattern. When a new section is selected, the new page will load with any child pages displaying within the hierarchy of the menu.

<div style="max-width: 300px;">
  <nav class="nsw-sidenav" aria-labelledby="sksm7sss26ns side navigation">
    <div class="nsw-sidenav__header">
      <h2 id="sksm7sss26ns" class="nsw-sidenav__heading">
        <a href="#" class="nsw-sidenav__heading-link">Section heading</a></h2>
    </div>
    <ul class="nsw-sidenav__list nsw-sidenav__list--level-1">
        <li class="nsw-sidenav__list-item ">
          <a href="#" class="nsw-sidenav__link ">
            Level 2
          </a>
        </li>
        <li class="nsw-sidenav__list-item ">
          <a href="#" class="nsw-sidenav__link ">
            Level 2
          </a>
        </li>
        <li class="nsw-sidenav__list-item has-active-children">
          <a href="#" class="nsw-sidenav__link ">
            Level 2
          </a>
          <ul class="nsw-sidenav__list nsw-sidenav__list--level-2">
              <li class="nsw-sidenav__list-item ">
                <a href="#" class="nsw-sidenav__link ">
                  Level 3
                </a>
              </li>
              <li class="nsw-sidenav__list-item has-active-children">
                <a href="#" class="nsw-sidenav__link ">
                  Level 3
                </a>
                <ul class="nsw-sidenav__list nsw-sidenav__list--level-3">
                    <li class="nsw-sidenav__list-item ">
                      <a href="#" class="nsw-sidenav__link ">
                        Level 4
                      </a>
                    </li>
                    <li class="nsw-sidenav__list-item ">
                      <a href="#" class="nsw-sidenav__link ">
                        Level 4
                      </a>
                    </li>
                    <li class="nsw-sidenav__list-item has-active-children">
                      <a href="#" class="nsw-sidenav__link is-current" aria-current="page">
                        Level 4
                      </a>
                      <ul class="nsw-sidenav__list nsw-sidenav__list--level-4">
                          <li class="nsw-sidenav__list-item ">
                            <a href="#" class="nsw-sidenav__link ">
                              Level 5
                            </a>
                          </li>
                          <li class="nsw-sidenav__list-item ">
                            <a href="#" class="nsw-sidenav__link ">
                              Level 5
                            </a>
                          </li>
                          <li class="nsw-sidenav__list-item ">
                            <a href="#" class="nsw-sidenav__link ">
                              Level 5
                            </a>
                          </li>
                      </ul>
                    </li>
                </ul>
              </li>
              <li class="nsw-sidenav__list-item ">
                <a href="#" class="nsw-sidenav__link ">
                  Level 3
                </a>
              </li>
          </ul>
        </li>
        <li class="nsw-sidenav__list-item ">
          <a href="#" class="nsw-sidenav__link ">
            Level 2
          </a>
        </li>
        <li class="nsw-sidenav__list-item ">
          <a href="#" class="nsw-sidenav__link ">
            Level 2
          </a>
        </li>
    </ul>
  </nav>
</div>

 

Copy

The side navigation allows users to find other pages within a section of a site. By default it supports three levels of nesting along with an accompanying heading. 

For visual hierarchy,  each level of nesting is indented 16px.

On mobile and smaller viewports, the side navigation is displayed through the main site navigation, sometimes called the hamburger menu.

 

The side nav can be used to show only sibling pages, preferably on the right hand side of your page. This will enable the user to see related pages and click though without having to go back.

The side nav can be used to show multiple levels of navigation. This allows the user to click through the page hierarchy. This can be displayed on either the right of the left side of your content area.

The highlight bar can be changed to your brand colour, if brand exemption has been approved.

You will need to change the nsw-primary-highlight colour in the _settings.scss file.


$nsw-primary-highlight: #d7153a !default;

 

Side nav with custom highlight