Designsystem.gov.scot uses cookies which are essential for the site to work. We also use non-essential cookies to help us improve our websites. Any data collected is anonymised. By continuing to use this site, you agree to our use of cookies.

Cookie settings

Your cookie settings have been saved.

Component

Site navigation

The main navigation on a website, site navigation is a row of core links that appears on every page.

Open this example in a new window

Sample HTML 

<nav class="ds_mobile-navigation" data-module="ds-mobile-navigation-menu">
    <button class="js-toggle-menu  ds_mobile-navigation__button" aria-expanded="false" aria-controls="mobile-navigation-menu">
        <span class="ds_site-header__control-text">Menu</span>

        <svg class="ds_icon  ds_site-header__control-icon" aria-hidden="true" role="img"><use xlink:href="/assets/images/icons/icons.stack.svg#menu-21"></use></svg>
        <svg class="ds_icon  ds_site-header__control-icon--close  ds_site-header__control-icon" aria-hidden="true" role="img"><use xlink:href="/assets/images/icons/icons.stack.svg#close-21"></use></svg>
    </button>

    <div id="mobile-navigation-menu" data-offsetselector=".ds_site-header">
        <div class="ds_mobile-navigation__content">

            <div class="ds_mobile-navigation__block">
                <ul class="ds_mobile-navigation__list">
                    <li class="ds_mobile-navigation__item">
                        <a href="#" class="ds_mobile-navigation__link">
                            Get started
                        </a>
                    </li>
                    <li class="ds_mobile-navigation__item">
                        <a href="#" class="ds_mobile-navigation__link">
                            Styles
                        </a>
                    </li>
                    <li class="ds_mobile-navigation__item">
                        <span class="ds_mobile-navigation__link  ds_current">
                            Components
                        </span>
                    </li>
                    <li class="ds_mobile-navigation__item">
                        <a href="#" class="ds_mobile-navigation__link">
                            Patterns
                        </a>
                    </li>
                </ul>
            </div>

            <button type="button" class="ds_mobile-navigation__backdrop  js-close-menu" aria-expanded="false" aria-controls="mobile-navigation-menu">
                <span class="visually-hidden">Close menu</span>
            </button>
        </div>
    </div>
</nav>

<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">
            <span class="ds_site-navigation__link  ds_current">
                Components
            </span>
        </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.

Links may be collapsed into an expandable ‘menu’ button on mobiles.

Why we use this component

Top level navigation gives users an overview of what’s included in a site by outlining its main categories.

It can also help users find key content quicker.

Evidence

Analytics evidence from mygov.scot and gov.scot shows that users are more likely to navigate to site sections of gov.scot using the site header’s primary navigation than using the same links on panels lower down the homepage.

Website analytics

To understand user behaviour, clicks on site navigation items can be tracked through the original page path, the click URL, the click text, and a data attribute showing the item clicked, for example data-header="header-link-1" or for the menu on mobile data-header="header-menu-toggle".

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