Sequential navigation
Sample HTML
<nav class="ds_sequential-nav" aria-label="Article navigation">
<div class="ds_sequential-nav__item ds_sequential-nav__item--prev">
<a href="#" class="ds_sequential-nav__button ds_sequential-nav__button--left">
<span class="ds_sequential-nav__text" data-label="previous">
Apply for or renew a Blue Badge
</span>
</a>
</div>
<div class="ds_sequential-nav__item ds_sequential-nav__item--next">
<a href="#" class="ds_sequential-nav__button ds_sequential-nav__button--right">
<span class="ds_sequential-nav__text" data-label="next">
Eligibility: who can have one?
</span>
</a>
</div>
</nav>
About this component
Sequential navigation is displayed at the bottom of content pages where there’s a clear next or previous page, such as a step-by-step guide spread over several web pages.
If it’s the first page of content, the ‘previous’ link will not show. If it’s the last page, the ‘next’ link will not show.
On mobile, the ‘next’ link displays stacked above the ‘previous’ link.
Components related to this
TODOSite search
Why we use this component
Sequential navigation allows users to navigate without having to go back to navigational links at the top of a page.
Evidence
Analytics shows sequential navigation is used by users across mygov.scot and gov.scot, especially on mobile devices, where it is more prominent than other forms of navigation.
Website analytics
To understand user behaviour, clicks on sequential navigation links can be tracked through the original page path, the click URL, the click text, and a data attribute showing the action.
The data attributes are added automatically by the Design System’s ‘tracking’ script.
Feedback, help and support
If you need help or support you can e-mail us at designsystem@gov.scot
There is a problem
Thanks for your feedback