Side navigation

Open this example in a new window

Sample HTML

<nav aria-label="Sections" class="ds_side-navigation" data-module="ds-side-navigation">
    <input type="checkbox" class="fully-hidden  js-toggle-side-navigation" id="show-side-navigation" aria-controls="side-navigation-root" />
    <label class="ds_side-navigation__expand  ds_link" for="show-side-navigation"><span class="visually-hidden">Show all</span> Pages in this section <span class="ds_side-navigation__expand-indicator"></span></label>

    <ul class="ds_side-navigation__list" id="side-navigation-root">
        <li class="ds_side-navigation__item  ds_side-navigation__item--has-children  ds_side-navigation__item--has-children--expanded">
            <a href="#" class="ds_side-navigation__link">Apples</a>
            <ul class="ds_side-navigation__list">
                <li class="ds_side-navigation__item  ds_side-navigation__item--has-children">
                    <a href="#" class="ds_side-navigation__link">Green apples</a>
                    <ul class="ds_side-navigation__list">
                        <li class="ds_side-navigation__item">
                            <span class="ds_side-navigation__link  ds_current">Bramley</span>
                        </li>
                        <li class="ds_side-navigation__item">
                            <a href="#" class="ds_side-navigation__link">Granny Smith</a>
                        </li>
                    </ul>
                </li>
                <li class="ds_side-navigation__item  ds_side-navigation__item--has-children">
                    <a href="#" class="ds_side-navigation__link">Red apples</a>
                </li>
            </ul>
        </li>
        <li class="ds_side-navigation__item">
            <a href="#" class="ds_side-navigation__link">Bananas</a>
        </li>
        <li class="ds_side-navigation__item">
            <a href="#" class="ds_side-navigation__link">Cherries</a>
        </li>
        <li class="ds_side-navigation__item">
            <a href="#" class="ds_side-navigation__link">Dates</a>
        </li>
    </ul>
</nav>

Developer notes

Configuration options

The text colour of the side navigation’s open/close toggle (only visible on small displays) can be overridden. It defaults to the primary brand colour.

$side-nav__expand-color

Your value for this should be included before you include the SCSS file.

$side-nav__expand-color: red;
@import '/path/to/components/side-navigation/side-navigation';

About this component

The side navigation is a list of links to other parts of the same web page or to other pages. It sits alongside the page content.

A side navigation can be made up of a flat or nested list of links.

The side navigation will highlight the page in the list that the user is on and each link should take the user to distinct content.

If the side navigation has a structure with nested sections, it should:

  • display all the pages in a section when a user selects the section
  • stay under 10 sections
  • have no more than 3 levels in total

The side navigation should also:

  • not repeat or be combined with grid navigation pages
  • not include icons
  • include a limited character count for links to avoid spanning over too many lines

The mobile version of side navigation is minimised into an expandable list at the top of the page.

Why we use this component

The side navigation gives users a snapshot of content within the user’s current website, as well as it sits in terms of the whole website.

Since it’s on the left hand side of the page, it also supports left to right reading.

Website analytics

To understand user behaviour, clicks on side navigation items can be tracked through the original page path, the click URL, the click text and a data attribute showing the item. Clicks on the mobile version’s open/close toggle can also be tracked using a data attribute.

The data attributes are added automatically by the Design System’s “tracking” script.

Accessibility

Aria attributes describe whether the side navigation is open or closed.

Find out more about accessibility requirements that should be applied to all online services in the dedicated accessibility section of this site.

Feedback, help or support

If you need any help or want to give any feedback you can e-mail us at: designsystem@gov.scot

Back to top