Multi-page guide
Sample HTML for Guide page example
<div class="ds_wrapper">
<nav aria-label="Breadcrumb">
<ol class="ds_breadcrumbs">
<li class="ds_breadcrumbs__item">
<a class="ds_breadcrumbs__link" href="#">Home</a>
</li>
<li class="ds_breadcrumbs__item">
<a class="ds_breadcrumbs__link" href="#">Housing</a>
</li>
<li class="ds_breadcrumbs__item">
<a class="ds_breadcrumbs__link" href="#">Water supplies and sewerage</a>
</li>
<li class="ds_breadcrumbs__item">
<a class="ds_breadcrumbs__link" href="#">Private water supplies</a>
</li>
<li class="ds_breadcrumbs__item" aria-current="page">Owning or using a private water supply</li>
</ol>
</nav>
<main id="main-content" class="ds_layout ds_layout--guide">
<div class="ds_layout__header">
<header class="ds_page-header">
<span class="ds_page-header__label ds_content-label">Owning or using a private water supply</span>
<h1 class="ds_page-header__title">Moving from a private water supply to the mains network</h1>
<dl class="ds_page-header__metadata ds_metadata">
<div class="ds_metadata__item">
<dt class="ds_metadata__key">Last updated</dt>
<dd class="ds_metadata__value">2 May 2025</dd>
</div>
</dl>
</header>
</div>
<div class="ds_layout__navigation">
<nav role="navigation" class="ds_contents-nav" aria-label="Pages in this guide">
<h2 class="ds_contents-nav__title">Contents</h2>
<ul class="ds_contents-nav__list">
<li class="ds_contents-nav__item">
<a href="#" class="ds_contents-nav__link">About private water supplies</a>
</li>
<li class="ds_contents-nav__item">
<a href="#" class="ds_contents-nav__link">Registering, risk assessing and testing private water supplies</a>
</li>
<li class="ds_contents-nav__item">
<a href="#" class="ds_contents-nav__link">Maintaining a private water supply</a>
</li>
<li class="ds_contents-nav__item">
<a href="#" class="ds_contents-nav__link">Treating a private water supply</a>
</li>
<li class="ds_contents-nav__item" aria-current="page">
<span class="ds_contents-nav__link ds_current">Moving from a private water supply to the mains network</span>
</li>
<li class="ds_contents-nav__item">
<a href="#" class="ds_contents-nav__link">Report problems with your private water supply</a>
</li>
<li class="ds_contents-nav__item">
<a href="#" class="ds_contents-nav__link">Apply for a private water supply grant</a>
</li>
</ul>
</nav>
</div>
<div class="ds_layout__content">
<p>You must contact Scottish Water if you want to move from a private water supply to using the public water supply, knowns as the mains water network.</p>
<p>Scottish Water's website has <a href="#">guidance on moving from a private supply</a>. This includes details of any checks they'll need to carry out.</p>
<p>If Scottish Water refuses to connect you, you can <a href="#">appeal their decision</a>.</p>
<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">
Treating a private water supply
</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">
Report problems with your private water supply
</span>
</a>
</div>
</nav>
</div>
</main>
</div>About this pattern
Use a multi-page guide to split up related content into 2 or more pages. We call these ‘chapters’.
Users can navigate between chapters using the:
- contents list, at the top of every page
- sequential navigation (the ‘previous’ and ‘next’ links), at the bottom of every page
When to use this pattern
This pattern can help users if you have a lot of information on a topic that can be split up.
For example, Adult Disability Payment gives information about this benefits payment across 8 chapters. Each chapter focuses on a different subtopic.
When not to use this pattern
This pattern should not be used to:
- create a collection of links
- divide up pages of a form
Alternatives to this pattern
Before creating a multi-page guide, consider whether other patterns might better meet your users’ needs.
You can create as many single pages of content, known as articles, as your user needs.
You can build navigational pages to help users browse your content.
Read guidance on how to choose between a multi-page guide or articles in the Digital Scotland Service Manual.
How to use this pattern
Layout
Use the guide layout to create a multi-page guide. Put the:
- contents list component into the navigational area
- sequential navigation component after the main text in the body content area
The contents list shows chapter titles in a list.
The title of the current chapter is marked in bold.
The other titles are links which take users to the other chapters.
Number of chapters
We recommend:
- 2 to 8 chapters per multi-page guide
- that the content list titles match the H1 on the chapter pages they link to
Writing chapter titles
Your chapter titles should:
- make sense in isolation
- front load the key information for the user
- be optimised for SEO
For example, in the Adult Disability Payment multi-page guide there’s a page with the title ‘Who can apply for Adult Disability Payment’.
This title works in the contents list and in a Google search result page.
GOV.UK’s style guide recommends titles of under 65 characters where possible.
Evidence
Number of chapters
Research suggests that too many chapters can create difficulties for users:
- GOV.UK travel advice research said users found information more easily and were less confused with a 5 item contents list (compared to 10)
- psychologist George Miller's work suggests users can keep between 5 to 9 titles in their short-term memory
Onward journeys
Tracking evidence from mygov shows that large numbers of users interact with contents lists and sequential navigation.
On average users who begin their mygov journey in a multi-page guide chapter view double the number of pages of users who begin on an article.
This indicates that the multi-page guide format prompts users to look at content beyond the chapter they land on.
The article pattern does not use the contents list or sequential navigation.
Accessibility
Give the contents list <nav> element a descriptive aria-label (e.g., aria-label="pages in this guide").
Use the correct heading level based on the placement of the contents list within the heading hierarchy.
You must communicate the user's location in the guide’s contents list clearly to assistive technologies and sighted users:
- the active <li> element must include aria-current="page"
- this active item must be a non-interactive <span> instead of an <a> to prevent redundant focus or clicks
- apply the ds_current class to the <span> for visual highlighting
Website analytics
To understand user behaviour, you can track interactions with the contents list and sequential navigations links through the original page path, the click URL, the click text, and a data attribute showing the item clicked.
The Design System’s ‘tracking’ script automatically adds these data attributes.