Components menu
Sequential navigation
A 'next' and 'previous' link to pages that come before or after the user’s current web page.
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 should not show. If it’s the last page, the ‘next’ link should 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.
HTML
<nav class="sequential--nav" aria-label="Article navigation">
<div class="row">
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 sequential--nav-item text-start">
<a href="" class="sequential--nav-button" data-navigation="sequential-previous" title="Previous">
<span class="sequential--nav-button-left" data-label="previous">
<i class="fa-solid fa-circle-chevron-left" aria-hidden="true"></i>
Previous
</span>
<br>
<span class="sequential--nav-text">
Changes to this privacy notice
</span>
</a>
</div>
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 sequential--nav-item text-end">
<a href="" class="sequential--nav-button" data-navigation="sequential-next">
<span class="sequential--nav-button-right" data-label="next">
Next
<i class="fa-solid fa-circle-chevron-right" aria-hidden="true"></i>
</span>
<br>
<span class="sequential--nav-text">
Data Protection Officer's contact details
</span>
</a>
</div>
</div>
</nav>
CSS
/* Sequential navigation
------------------------------------ */
.sequential--nav-button {
text-decoration: none;
border: none;
}
.sequential--nav-button-left, .sequential--nav-button-right {
font-size: 1.65rem;
margin-bottom: 0;
}