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">
                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 click URL, the click text, and a data attribute showing the item clicked.

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