Overview
Overview
The side navigation is a vertical list of links that is usually placed next to the body content of a website. It serves as a helpful tool for users to quickly find other pages that relate to the same topic or section.
The side navigation generally supports up to 3 levels of nesting, and each level is accompanied by a relevant heading to provide context.
On mobile devices and smaller viewports, the side navigation is designed to use the accordion component. This allows it to collapse down into a compact, expandable element that's easy to use on smaller screens.
Example
<!-- Column containing side navigation -->
<div class="col-xs-12 col-lg-6 col-xl-5">
<!-- Side navigation section -->
<aside class="qld__side-nav qld__accordion">
<!-- Button to toggle side navigation -->
<button class="qld__side-nav__toggle qld__accordion__title qld__accordion--closed" aria-controls="nav-default" aria-expanded="false" aria-selected="false">In this section</button>
<!-- Side navigation content -->
<nav id="nav-default" aria-label="section" class="qld__side-nav__content qld__accordion--closed qld__accordion__body">
<!-- Navigation title -->
<h2 class="qld__sidenav__title">
<a class="qld__sidenav__link" href="#">Lodging your tax return</a>
</h2>
<!-- Navigation links -->
<ul class="qld__link-list">
<li><a class="qld__sidenav__link" href="#">Lodge online</a>
<ul class="qld__link-list">
<li><a class="qld__sidenav__link" href="#">Pre-filling your online tax return</a></li>
</ul>
</li>
<li class="active" aria-current="page"><span>Do you need to lodge a tax return?</span></li>
<li><a class="qld__sidenav__link" href="#">What's new for individuals</a></li>
<li><a class="qld__sidenav__link" href="#">Why you may receive a tax bill</a></li>
<li><a class="qld__sidenav__link" href="#">In detail</a>
<ul class="qld__link-list">
<li><a class="qld__sidenav__link" href="#">Record keeping</a>
<ul class="qld__link-list">
<li><a class="qld__sidenav__link" href="#"><svg class="qld__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="https://www.designsystem.qld.gov.au/?a=169317:dist/mysource_files/img/QLD-icons.svg#tick"></use></svg>Keeping your tax records</a></li>
<li><a class="qld__sidenav__link" href="#"><svg class="qld__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="https://www.designsystem.qld.gov.au/?a=169317:dist/mysource_files/img/QLD-icons.svg#tick"></use></svg>Incorrect amounts</a></li>
</ul>
</li>
<li><a class="qld__sidenav__link" href="#">Tax receipt</a></li>
<li><a class="qld__sidenav__link" href="#">Pre-fill availability</a></li>
</ul>
</li>
</ul>
</nav>
</aside>
</div>
Usage guidelines
When to use
- Use this component when you have a large amount of related content that needs to be organised and easily accessible to users
- When you want to display navigational hierarchy with one to three levels
- Use this component when you want to provide users with a secondary navigation option that's separate from the main content area of the page
- Content pages that are part of multi-level navigation: Pages that require multiple levels of navigation, such as those with subcategories can benefit from a side navigation component that allows users to drill down
When not to use
- On small sites: Don't use this component if you only have a small number of navigation items, as it may be unnecessarily complex for users. If the site has fewer than 5 pages, consider organising the page without a navigational hierarchy
- Existing navigation: Multiple navigation options, consider if adding side navigation benefits the user. Try to simplify your navigation system where possible
- On home and landing pages: The content on a home or landing page may not necessarily require a secondary navigation option, as users may be able to find what they need through scrolling, searching, or clicking on clear calls to action. Furthermore the purpose of a home or landing page is often to provide a clear and concise overview of the content and services offered by the website. Including a side navigation component with a large number of links may overwhelm users and distract from the main purpose of the page
How to use
- Only expand active subsections to help emphasise which section the user is in and to reduce visual complexity
- Keep the navigation link text short. They can be shorter versions of pages titles
Find the right balance
If the side navigation is too long, users may miss items at the bottom. If there are too many levels, users may miss items that require too many clicks. Do usability testing to find the right balance between breadth and depth. The goal for a menu, as the Nielsen Norman Group states, is for people to “rely on recognition rather than recall,” so menus need to be short enough to scan, but long enough to be clear (Whitenton, 2013).
Limit the number of Levels
The number of levels within a navigation is ultimately determined by the site hierarchy. Ideally, the fewer levels people need to click through, the quicker and least confusing it should be for them to access what they want. Nielson and Normans group’s research suggests that “the deeper a hierarchy becomes, the more likely visitors are to become disoriented.” (Whitenton, 2013).