Site navigation
The main navigation on a website, site navigation is a set of links that appears on every page.
Sample HTML
<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.
The data attributes are added automatically by the Design System’s ‘tracking’ script.
Feedback, help or support
If you need any help or want to give any feedback you can e-mail us at: designsystem@gov.scot