Page types - A to Z page
A to Z is a way of presenting a number of pages alphabetically.
The A to Z is made up of:
- the A to Z navigation which sits at the top of the page
- an A to Z list panel which houses all the links to pages
When to use this pattern
A to Z lists help users find the page they want by bringing together links to lots of pages about 1 broad subject​. But they only work when users know the name of the thing they're looking for and they expect to find it under that subject.
When not to use this pattern
Do not use the A to Z pattern:
- to group pages on different broad subjects
- in a transactional service
- as part of a content page
Elements of the A to Z pattern
A to Z navigation
Use the A to Z navigation at the top of the page.
A to Z list panel
<div class="hs2-card hs2-card--feature">
<div class="hs2-card__content hs2-card__content--feature">
<h2 class="hs2-card__heading hs2-card__heading--feature hs2-u-font-size-24">
A
</h2>
<ul class='hs2-list hs2-list--border'>
<li><a href='/content/abbreviations-and-acronyms#abbreviations-and-acronyms/'>Abbreviations and acronyms</a></li>
<li><a href='/content/abbreviations-and-acronyms#aligning-text/'>Aligning text</a></li>
<li><a href='/content/abbreviations-and-acronyms#apostrophes/'>Apostrophes</a></li>
</ul>
</div>
</div>
<div class="hs2-card hs2-card--feature">
<div class="hs2-card__content hs2-card__content--feature">
<h2 class="hs2-card__heading hs2-card__heading--feature hs2-u-font-size-24">
B
</h2>
<ul class='hs2-list hs2-list--border'>
<li><a href='/content/abbreviations-and-acronyms#bold/'>Bold</a></li>
</ul>
</div>
</div>
<div class="hs2-card hs2-card--feature">
<div class="hs2-card__content hs2-card__content--feature">
<h2 class="hs2-card__heading hs2-card__heading--feature hs2-u-font-size-24">
C
</h2>
<ul class='hs2-list hs2-list--border'>
<li><a href='/content/abbreviations-and-acronyms#capitalisation'>Capitalisation</a></li>
<li><a href='/content/abbreviations-and-acronyms#contractions/'>Contractions</a></li>
</ul>
</div>
</div>{% from 'card/macro.njk' import card %}
{{ card({
"feature": "true",
"heading": "A",
"headingClasses": "hs2-u-font-size-24",
"descriptionHtml": "<ul class='hs2-list hs2-list--border'>
<li><a href='/content/abbreviations-and-acronyms#abbreviations-and-acronyms/'>Abbreviations and acronyms</a></li>
<li><a href='/content/abbreviations-and-acronyms#aligning-text/'>Aligning text</a></li>
<li><a href='/content/abbreviations-and-acronyms#apostrophes/'>Apostrophes</a></li>
</ul>"
}) }}
{{ card({
"feature": "true",
"heading": "B",
"headingClasses": "hs2-u-font-size-24",
"descriptionHtml": "<ul class='hs2-list hs2-list--border'>
<li><a href='/content/abbreviations-and-acronyms#bold/'>Bold</a></li>
</ul>"
}) }}
{{ card({
"feature": "true",
"heading": "C",
"headingClasses": "hs2-u-font-size-24",
"descriptionHtml": "<ul class='hs2-list hs2-list--border'>
<li><a href='/content/abbreviations-and-acronyms#capitalisation'>Capitalisation</a></li>
<li><a href='/content/abbreviations-and-acronyms#contractions/'>Contractions</a></li>
</ul>"
}) }}
{#
{{ card({
"feature": "true",
"heading": "D",
"headingClasses": "hs2-u-font-size-24",
"descriptionHtml": "<ul class='hs2-list hs2-list--border'>
<li><a href='/conditions/dandruff/'>Dandruff</a></li>
<li><a href='/conditions/dementia/'>Dementia</a></li>
<li><a href='/conditions/toothache/'>Dental pain</a></li>
</ul>"
}) }} #}Use the A to Z list panel below the A to Z navigation to help users to navigate around a large section.
The "Back to top" links let users jump back up to the A to Z navigation.
Accessibility
We write "A to Z" not "A-Z" because this is generally clearer for people who use screen readers. Some screen readers ignore the dash and read "A-Z" as "Ay zed".
Have you tested this pattern?
If so, please share your research findings and let us know how it has worked for you. This will help us improve it for everyone.
If you have any questions you can contact us by email.
