Site navigation

<nav class="ds_site-navigation">
    <ul class="ds_site-navigation__list">
        <li class="ds_site-navigation__item">
            <a href="#" class="ds_site-navigation__link">
                Get started
            </a>
        </li>
        <li class="ds_site-navigation__item">
            <a href="#" class="ds_site-navigation__link">
                Styles
            </a>
        </li>
        <li class="ds_site-navigation__item">
            <a href="#" class="ds_site-navigation__link  ds_current" aria-current="true">
                Components
            </a>
        </li>
        <li class="ds_site-navigation__item">
            <a href="#" class="ds_site-navigation__link">
                Patterns
            </a>
        </li>
    </ul>
</nav>

About this component

Site navigation arranges key links into a row and should go at the top of a website.

Site navigation displays as an expandable ‘menu’ button on small devices.

Why we use this component

Site navigation gives users an overview of a site's content by outlining its main categories. It can also help users find key content.

Evidence

We have analytics evidence from and gov.scot. The evidence shows that users are more likely to navigate to sections of the website using the site navigation than using the links on panels lower down the homepage.

Website analytics

To understand user behaviour, you can track clicks on site 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 clicked

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

Tracking attributes

Links in site navigation components get a data-header attribute. Its value uses the pattern header-link-[index] where the index is one-based.

They are also given a data-device attribute whose value is either mobile or desktop.

<a href="/patterns/" class="ds_site-navigation__link" data-device="desktop" data-header="header-link-4">Patterns</a>

The mobile navigation’s toggle button is given a data-header attribute of header-menu-toggle.