Side navigation

<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">
                            <a href="#" class="ds_side-navigation__link  ds_current" aria-current="page">Bramley</a>
                        </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>

About this component

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. Side navigation can be a flat or nested list of links.

Side navigation highlights the page in the list that the user is on. Each link should take the user to distinct content.

If 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 an expandable list at the top of the page.

Why we use this component

Side navigation helps users move between pages in a section of a website. It also shows users at a glance where they are in a section of a website.

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

Accessibility

Aria attributes describe whether a link is currently selected and if the side navigation is open or closed.

Website analytics

To understand user behaviour, you can track clicks on side navigation items through the:

• original page path
• the selected URL (also known as the click URL)
• the selected text (also known as the click text)
• a data attribute showing the item

You can track click on the mobile version’s open/close toggle using a data attribute.

The Design System’s ‘tracking’ script adds the data attributes.

Tracking attributes

Links in side navigation get a data-navigation attribute. Its value uses the pattern sidenav-[index] where the index is one-based.

<a href="#" class="ds_side-navigation__link" data-navigation="sidenav-1">Apples</a>

When there are nested pages in a side navigation, the subpages’ indexes are appended to the attribute.

<a href="#" class="ds_side-navigation__link" data-navigation="sidenav-1-2">Red apples</a>

On small screens the side navigation has an open/close toggle button. That button gets a data-navigation attribute. Its value uses the pattern navigation-[open/close].This attribute is updated to denote the correct action when the side navigation is opened or closed.

<button class="ds_side-navigation__expand ds_link js-side-navigation-button" data-navigation="navigation-open">Show all pages in this section</button>