Sequential navigation

<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 provides links to the previous and next pages at the end of a page. It is useful when there is a collection of pages that users should read in sequence.

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.

Why we use this component

Sequential navigation puts buttons to continue reading a sequence of articles where a user needs them.

Evidence

Analytics shows sequential navigation used by users across mygov.scot and gov.scot. It's used more  on mobile devices, where it is more prominent than other forms of navigation.

Website analytics

To understand user behaviour, you can track clicks on sequential navigation links 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 action

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

Tracking attributes

The ‘previous page’ link in sequential navigation is given a data-navigation attribute. Its value is sequential-previous.

<a href="#" class="ds_sequential-nav__button  ds_sequential-nav__button--left" data-navigation="sequential-previous">
    <span class="ds_sequential-nav__text" data-label="previous">
        Apply for or renew a Blue Badge
    </span>
</a>

The ‘next page’ link in sequential navigation is given a data-navigation attribute. Its value is sequential-next.

<a href="#" class="ds_sequential-nav__button  ds_sequential-nav__button--right" data-navigation="sequential-next">
    <span class="ds_sequential-nav__text" data-label="next">
        Eligibility: who can have one?
    </span>
</a>