Sequential navigation

A ‘next’ and ‘previous’ link to pages that come before or after the user’s current web page.

Open this example in a new window

Sample HTML

<nav class="ds_sequential-nav" aria-label="Article navigation">
    <div class="ds_sequential-nav__item  ds_sequential-nav__item--prev">
        <a data-navigation="sequential-previous" title="Previous section" 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 data-navigation="sequential-next" title="Next section" 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>

Developer notes

Configuration options

The icons used in sequential navigation use the brand colours you have defined (or the default brand colours), but they can be explicitly specified.

The properties you can override are:

  • $page-nav__icon-color - background colour of the icon
  • $page-nav__icon-hover - background colour of the icon when hovering on the link
  • $page-nav__icon-focus - background colour of the icon when focusing on the link
  • $page-nav__prefix-color - colour of the prefix text (“next” and “previous”)

Your values for these should be included before you include the SCSS file. Note that any colours you specify will need to meet WCAG contrast rules.

$page-nav__icon-color: #f00;
$page-nav__icon-hover: #a00;
@import '/path/to/components/sequential-navigation/sequential-navigation';

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.

Site 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 can be tracked through the original page path, the click URL, the click text, and a data attribute showing the action, for example data-navigation="sequential-previous" or data-navigation="sequential-next".

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