Page types
-
A to Z page
A to Z is a way of presenting a number of pages alphabetically.
Open this default a to z page example in new window
Copy default a to z page code
Close default a to z page code
<div class="nhsuk-width-container">
<main class="nhsuk-main-wrapper" id="maincontent" role="main">
<div class="nhsuk-grid-row">
<div class="nhsuk-grid-column-full">
<h1>Health A to Z</h1>
<nav class="nhsuk-u-margin-bottom-4 nhsuk-u-margin-top-4" id="nhsuk-nav-a-z" role="navigation" aria-label="A to Z Navigation">
<ol class="nhsuk-list nhsuk-u-clear nhsuk-u-margin-0" role="list">
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1 nhsuk-a-to-z-min-width">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#A">A</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1 nhsuk-a-to-z-min-width">
<span class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block nhsuk-u-secondary-text-color">B</span>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1 nhsuk-a-to-z-min-width">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#C">C</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1 nhsuk-a-to-z-min-width">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#D">D</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1 nhsuk-a-to-z-min-width">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#E">E</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1 nhsuk-a-to-z-min-width">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#F">F</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1 nhsuk-a-to-z-min-width">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#G">G</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1 nhsuk-a-to-z-min-width">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#H">H</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1 nhsuk-a-to-z-min-width">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#I">I</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1 nhsuk-a-to-z-min-width">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#J">J</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1 nhsuk-a-to-z-min-width">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#K">K</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1 nhsuk-a-to-z-min-width">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#L">L</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1 nhsuk-a-to-z-min-width">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#M">M</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1 nhsuk-a-to-z-min-width">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#N">N</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1 nhsuk-a-to-z-min-width">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#O">O</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1 nhsuk-a-to-z-min-width">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#P">P</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1 nhsuk-a-to-z-min-width">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#Q">Q</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1 nhsuk-a-to-z-min-width">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#R">R</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1 nhsuk-a-to-z-min-width">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#S">S</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1 nhsuk-a-to-z-min-width">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#T">T</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1 nhsuk-a-to-z-min-width">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#U">U</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1 nhsuk-a-to-z-min-width">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#V">V</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1 nhsuk-a-to-z-min-width">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#W">W</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1 nhsuk-a-to-z-min-width">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#X">X</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1 nhsuk-a-to-z-min-width">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#Y">Y</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1 nhsuk-a-to-z-min-width">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#Z">Z</a>
</li>
</ol>
</nav>
<div class="nhsuk-card nhsuk-card--feature">
<div class="nhsuk-card__content nhsuk-card__content--feature">
<h2 id="A" class="nhsuk-card__heading nhsuk-card__heading--feature nhsuk-u-font-size-24">
A
</h2>
<ul class="nhsuk-list nhsuk-list--border">
<li><a href="/conditions/abdominal-aortic-aneurysm/">AAA</a></li>
<li><a href="/conditions/abdominal-aortic-aneurysm/">Abdominal aortic aneurysm</a></li>
<li><a href="/conditions/abscess/">Abscess</a></li>
</ul>
</div>
</div>
<div class="nhsuk-back-to-top">
<a class="nhsuk-back-to-top__link" href="#nhsuk-nav-a-z">
Back to top
</a>
</div>
<div class="nhsuk-card nhsuk-card--feature">
<div class="nhsuk-card__content nhsuk-card__content--feature">
<h2 id="B" class="nhsuk-card__heading nhsuk-card__heading--feature nhsuk-u-font-size-24">
B
</h2>
<ul class="nhsuk-list nhsuk-list--border">
<li>There are currently no conditions listed</li>
</ul>
</div>
</div>
<div class="nhsuk-back-to-top">
<a class="nhsuk-back-to-top__link" href="#nhsuk-nav-a-z">
Back to top
</a>
</div>
<div class="nhsuk-card nhsuk-card--feature">
<div class="nhsuk-card__content nhsuk-card__content--feature">
<h2 id="C" class="nhsuk-card__heading nhsuk-card__heading--feature nhsuk-u-font-size-24">
C
</h2>
<ul class="nhsuk-list nhsuk-list--border">
<li><a href="/conditions/chest-pain/">Chest pain</a></li>
<li><a href="/conditions/cold-sores/">Cold sore</a></li>
</ul>
</div>
</div>
<div class="nhsuk-back-to-top">
<a class="nhsuk-back-to-top__link" href="#nhsuk-nav-a-z">
Back to top
</a>
</div>
<div class="nhsuk-card nhsuk-card--feature">
<div class="nhsuk-card__content nhsuk-card__content--feature">
<h2 id="D" class="nhsuk-card__heading nhsuk-card__heading--feature nhsuk-u-font-size-24">
D
</h2>
<ul class="nhsuk-list nhsuk-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>
</div>
</div>
<div class="nhsuk-back-to-top">
<a class="nhsuk-back-to-top__link" href="#nhsuk-nav-a-z">
Back to top
</a>
</div>
</div>
</div>
</main>
</div>
Copy default a to z page code
Close default a to z page code
{% from 'card/macro.njk' import card %}
{% block content %}
<div class="nhsuk-grid-row">
<div class="nhsuk-grid-column-full">
<h1>Health A to Z</h1>
<nav class="nhsuk-u-margin-bottom-4 nhsuk-u-margin-top-4" id="nhsuk-nav-a-z" role="navigation" aria-label="A to Z Navigation">
<ol class="nhsuk-list nhsuk-u-clear nhsuk-u-margin-0" role="list">
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1 nhsuk-a-to-z-min-width">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#A">A</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1 nhsuk-a-to-z-min-width">
<span class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block nhsuk-u-secondary-text-color">B</span>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1 nhsuk-a-to-z-min-width">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#C">C</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1 nhsuk-a-to-z-min-width">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#D">D</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1 nhsuk-a-to-z-min-width">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#E">E</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1 nhsuk-a-to-z-min-width">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#F">F</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1 nhsuk-a-to-z-min-width">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#G">G</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1 nhsuk-a-to-z-min-width">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#H">H</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1 nhsuk-a-to-z-min-width">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#I">I</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1 nhsuk-a-to-z-min-width">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#J">J</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1 nhsuk-a-to-z-min-width">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#K">K</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1 nhsuk-a-to-z-min-width">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#L">L</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1 nhsuk-a-to-z-min-width">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#M">M</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1 nhsuk-a-to-z-min-width">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#N">N</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1 nhsuk-a-to-z-min-width">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#O">O</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1 nhsuk-a-to-z-min-width">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#P">P</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1 nhsuk-a-to-z-min-width">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#Q">Q</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1 nhsuk-a-to-z-min-width">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#R">R</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1 nhsuk-a-to-z-min-width">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#S">S</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1 nhsuk-a-to-z-min-width">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#T">T</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1 nhsuk-a-to-z-min-width">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#U">U</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1 nhsuk-a-to-z-min-width">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#V">V</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1 nhsuk-a-to-z-min-width">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#W">W</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1 nhsuk-a-to-z-min-width">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#X">X</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1 nhsuk-a-to-z-min-width">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#Y">Y</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1 nhsuk-a-to-z-min-width">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#Z">Z</a>
</li>
</ol>
</nav>
<div class="nhsuk-card nhsuk-card--feature">
<div class="nhsuk-card__content nhsuk-card__content--feature">
<h2 id="A" class="nhsuk-card__heading nhsuk-card__heading--feature nhsuk-u-font-size-24">
A
</h2>
<ul class="nhsuk-list nhsuk-list--border">
<li><a href="/conditions/abdominal-aortic-aneurysm/">AAA</a></li>
<li><a href="/conditions/abdominal-aortic-aneurysm/">Abdominal aortic aneurysm</a></li>
<li><a href="/conditions/abscess/">Abscess</a></li>
</ul>
</div>
</div>
<div class="nhsuk-back-to-top">
<a class="nhsuk-back-to-top__link" href="#nhsuk-nav-a-z">
Back to top
</a>
</div>
<div class="nhsuk-card nhsuk-card--feature">
<div class="nhsuk-card__content nhsuk-card__content--feature">
<h2 id="B" class="nhsuk-card__heading nhsuk-card__heading--feature nhsuk-u-font-size-24">
B
</h2>
<ul class="nhsuk-list nhsuk-list--border">
<li>There are currently no conditions listed</li>
</ul>
</div>
</div>
<div class="nhsuk-back-to-top">
<a class="nhsuk-back-to-top__link" href="#nhsuk-nav-a-z">
Back to top
</a>
</div>
<div class="nhsuk-card nhsuk-card--feature">
<div class="nhsuk-card__content nhsuk-card__content--feature">
<h2 id="C" class="nhsuk-card__heading nhsuk-card__heading--feature nhsuk-u-font-size-24">
C
</h2>
<ul class="nhsuk-list nhsuk-list--border">
<li><a href="/conditions/chest-pain/">Chest pain</a></li>
<li><a href="/conditions/cold-sores/">Cold sore</a></li>
</ul>
</div>
</div>
<div class="nhsuk-back-to-top">
<a class="nhsuk-back-to-top__link" href="#nhsuk-nav-a-z">
Back to top
</a>
</div>
<div class="nhsuk-card nhsuk-card--feature">
<div class="nhsuk-card__content nhsuk-card__content--feature">
<h2 id="D" class="nhsuk-card__heading nhsuk-card__heading--feature nhsuk-u-font-size-24">
D
</h2>
<ul class="nhsuk-list nhsuk-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>
</div>
</div>
<div class="nhsuk-back-to-top">
<a class="nhsuk-back-to-top__link" href="#nhsuk-nav-a-z">
Back to top
</a>
</div>
</div>
</div>
{% endblock %}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.
We've found that some users would rather go to an A to Z list of pages than search. For example, when they weren't sure how to spell a word like "appendicitis", they expected to find it in the A to Z.
We currently use the A to Z pattern in these areas of the NHS website:
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
Open this panel a to z page example in new window
Copy panel a to z page code
Close panel a to z page code
<div id="nhsuk-nav-a-z">
<div class="nhsuk-card nhsuk-card--feature">
<div class="nhsuk-card__content nhsuk-card__content--feature">
<h2 class="nhsuk-card__heading nhsuk-card__heading--feature nhsuk-u-font-size-24">
A
</h2>
<ul class='nhsuk-list nhsuk-list--border'>
<li><a href='/conditions/abdominal-aortic-aneurysm/'>AAA</a></li>
<li><a href='/conditions/abdominal-aortic-aneurysm/'>Abdominal aortic aneurysm</a></li>
<li><a href='/conditions/abscess/'>Abscess</a></li>
</ul>
</div>
</div>
<div class="nhsuk-back-to-top">
<a class="nhsuk-back-to-top__link" href="#nhsuk-nav-a-z">
Back to top
</a>
</div>
<div class="nhsuk-card nhsuk-card--feature">
<div class="nhsuk-card__content nhsuk-card__content--feature">
<h2 class="nhsuk-card__heading nhsuk-card__heading--feature nhsuk-u-font-size-24">
B
</h2>
<ul class='nhsuk-list nhsuk-list--border'>
<li>There are currently no conditions listed</li>
</ul>
</div>
</div>
<div class="nhsuk-back-to-top">
<a class="nhsuk-back-to-top__link" href="#nhsuk-nav-a-z">
Back to top
</a>
</div>
<div class="nhsuk-card nhsuk-card--feature">
<div class="nhsuk-card__content nhsuk-card__content--feature">
<h2 class="nhsuk-card__heading nhsuk-card__heading--feature nhsuk-u-font-size-24">
C
</h2>
<ul class='nhsuk-list nhsuk-list--border'>
<li><a href='/conditions/chest-pain/'>Chest pain</a></li>
<li><a href='/conditions/cold-sores/'>Cold sore</a></li>
</ul>
</div>
</div>
<div class="nhsuk-back-to-top">
<a class="nhsuk-back-to-top__link" href="#nhsuk-nav-a-z">
Back to top
</a>
</div>
<div class="nhsuk-card nhsuk-card--feature">
<div class="nhsuk-card__content nhsuk-card__content--feature">
<h2 class="nhsuk-card__heading nhsuk-card__heading--feature nhsuk-u-font-size-24">
D
</h2>
<ul class='nhsuk-list nhsuk-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>
</div>
</div>
<div class="nhsuk-back-to-top">
<a class="nhsuk-back-to-top__link" href="#nhsuk-nav-a-z">
Back to top
</a>
</div>
</div>
Copy panel a to z page code
Close panel a to z page code
{% from 'card/macro.njk' import card %}
{% block content %}
<div id="nhsuk-nav-a-z">
{{ card({
"feature": "true",
"heading": "A",
"headingClasses": "nhsuk-u-font-size-24",
"descriptionHtml": "<ul class='nhsuk-list nhsuk-list--border'>
<li><a href='/conditions/abdominal-aortic-aneurysm/'>AAA</a></li>
<li><a href='/conditions/abdominal-aortic-aneurysm/'>Abdominal aortic aneurysm</a></li>
<li><a href='/conditions/abscess/'>Abscess</a></li>
</ul>"
}) }}
<div class="nhsuk-back-to-top">
<a class="nhsuk-back-to-top__link" href="#nhsuk-nav-a-z">
Back to top
</a>
</div>
{{ card({
"feature": "true",
"heading": "B",
"headingClasses": "nhsuk-u-font-size-24",
"descriptionHtml": "<ul class='nhsuk-list nhsuk-list--border'>
<li>There are currently no conditions listed</li>
</ul>"
}) }}
<div class="nhsuk-back-to-top">
<a class="nhsuk-back-to-top__link" href="#nhsuk-nav-a-z">
Back to top
</a>
</div>
{{ card({
"feature": "true",
"heading": "C",
"headingClasses": "nhsuk-u-font-size-24",
"descriptionHtml": "<ul class='nhsuk-list nhsuk-list--border'>
<li><a href='/conditions/chest-pain/'>Chest pain</a></li>
<li><a href='/conditions/cold-sores/'>Cold sore</a></li>
</ul>"
}) }}
<div class="nhsuk-back-to-top">
<a class="nhsuk-back-to-top__link" href="#nhsuk-nav-a-z">
Back to top
</a>
</div>
{{ card({
"feature": "true",
"heading": "D",
"headingClasses": "nhsuk-u-font-size-24",
"descriptionHtml": "<ul class='nhsuk-list nhsuk-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>"
}) }}
<div class="nhsuk-back-to-top">
<a class="nhsuk-back-to-top__link" href="#nhsuk-nav-a-z">
Back to top
</a>
</div>
</div>
{% endblock %}Use the A to Z list panel below the A to Z navigation to help users to navigate around a large section, for example a range of different health conditions. The example on this page is from the Health A to Z page on the NHS website.
The "Back to top" links let users jump back up to the A to Z navigation.
Research on this pattern
During a research lab on the Health A to Z on the NHS website in 2018, all users were able to use the A to Z list and it behaved as they expected.
However, some users missed the quick anchor links at the top of the page and instead scrolled through the items. These users found the list overwhelming.
Some users did not use the "Back to top" links. Instead they preferred to scroll to the top of the page.
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".
Help us improve this guidance
Share insights or feedback and take part in the discussion. We use GitHub as a collaboration space. All the information on it is open to the public.
Read more about how to feedback or share insights.
If you have any questions, get in touch with the service manual team.
Updated: March 2024