Skip to main content

A to Z

A to Z is a way of presenting a number of pages alphabetically.

Medicines A to Z example on desktop
Health A to Z example on desktop
Medicines A to Z example on mobile
Health A to Z example on mobile

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

Open in new window
Copy
<nav class="nhsuk-nav-a-z" id="nhsuk-nav-a-z" role="navigation" aria-label="A to Z Navigation">
  <ol class="nhsuk-nav-a-z__list" role="list">
    <li class="nhsuk-nav-a-z__item">
      <a class="nhsuk-nav-a-z__link" href="#A">A</a>
    </li>
    <li class="nhsuk-nav-a-z__item">
      <span class="nhsuk-nav-a-z__link--disabled">B</span>
    </li>
    <li class="nhsuk-nav-a-z__item">
      <a class="nhsuk-nav-a-z__link" href="#C">C</a>
    </li>
    <li class="nhsuk-nav-a-z__item">
      <a class="nhsuk-nav-a-z__link" href="#D">D</a>
    </li>
    <li class="nhsuk-nav-a-z__item">
      <a class="nhsuk-nav-a-z__link" href="#E">E</a>
    </li>
    <li class="nhsuk-nav-a-z__item">
      <a class="nhsuk-nav-a-z__link" href="#F">F</a>
    </li>
    <li class="nhsuk-nav-a-z__item">
      <a class="nhsuk-nav-a-z__link" href="#G">G</a>
    </li>
    <li class="nhsuk-nav-a-z__item">
      <a class="nhsuk-nav-a-z__link" href="#H">H</a>
    </li>
    <li class="nhsuk-nav-a-z__item">
      <a class="nhsuk-nav-a-z__link" href="#I">I</a>
    </li>
    <li class="nhsuk-nav-a-z__item">
      <a class="nhsuk-nav-a-z__link" href="#J">J</a>
    </li>
    <li class="nhsuk-nav-a-z__item">
      <a class="nhsuk-nav-a-z__link" href="#K">K</a>
    </li>
    <li class="nhsuk-nav-a-z__item">
      <a class="nhsuk-nav-a-z__link" href="#L">L</a>
    </li>
    <li class="nhsuk-nav-a-z__item">
      <a class="nhsuk-nav-a-z__link" href="#M">M</a>
    </li>
    <li class="nhsuk-nav-a-z__item">
      <a class="nhsuk-nav-a-z__link" href="#N">N</a>
    </li>
    <li class="nhsuk-nav-a-z__item">
      <a class="nhsuk-nav-a-z__link" href="#O">O</a>
    </li>
    <li class="nhsuk-nav-a-z__item">
      <a class="nhsuk-nav-a-z__link" href="#P">P</a>
    </li>
    <li class="nhsuk-nav-a-z__item">
      <a class="nhsuk-nav-a-z__link" href="#Q">Q</a>
    </li>
    <li class="nhsuk-nav-a-z__item">
      <a class="nhsuk-nav-a-z__link" href="#R">R</a>
    </li>
    <li class="nhsuk-nav-a-z__item">
      <a class="nhsuk-nav-a-z__link" href="#S">S</a>
    </li>
    <li class="nhsuk-nav-a-z__item">
      <a class="nhsuk-nav-a-z__link" href="#T">T</a>
    </li>
    <li class="nhsuk-nav-a-z__item">
      <a class="nhsuk-nav-a-z__link" href="#U">U</a>
    </li>
    <li class="nhsuk-nav-a-z__item">
      <a class="nhsuk-nav-a-z__link" href="#V">V</a>
    </li>
    <li class="nhsuk-nav-a-z__item">
      <a class="nhsuk-nav-a-z__link" href="#W">W</a>
    </li>
    <li class="nhsuk-nav-a-z__item">
      <a class="nhsuk-nav-a-z__link" href="#X">X</a>
    </li>
    <li class="nhsuk-nav-a-z__item">
      <a class="nhsuk-nav-a-z__link" href="#Y">Y</a>
    </li>
    <li class="nhsuk-nav-a-z__item">
      <a class="nhsuk-nav-a-z__link" href="#Z">Z</a>
    </li>
  </ol>
</nav>
Copy
{% from 'nav-a-z/macro.njk' import azNav %}

{{ azNav({
  "items": [
    {
      "label": "A"
    },
    {
      "disable": "true",
      "label": "B"
    },
    {
      "label": "C"
    },
    {
      "label": "D"
    },
    {
      "label": "E"
    },
    {
      "label": "F"
    },
    {
      "label": "G"
    },
    {
      "label": "H"
    },
    {
      "label": "I"
    },
    {
      "label": "J"
    },
    {
      "label": "K"
    },
    {
      "label": "L"
    },
    {
      "label": "M"
    },
    {
      "label": "N"
    },
    {
      "label": "O"
    },
    {
      "label": "P"
    },
    {
      "label": "Q"
    },
    {
      "label": "R"
    },
    {
      "label": "S"
    },
    {
      "label": "T"
    },
    {
      "label": "U"
    },
    {
      "label": "V"
    },
    {
      "label": "W"
    },
    {
      "label": "X"
    },
    {
      "label": "Y"
    },
    {
      "label": "Z"
    }
  ]
}) }}

Use the A to Z navigation at the top of the page.

A to Z list panel

Open in new window
Copy
<div class="nhsuk-list-panel">
  <h2 class="nhsuk-list-panel__label" id="A">A</h2>
  <ul class="nhsuk-list-panel__list nhsuk-list-panel__list--with-label">
    <li class="nhsuk-list-panel__item">
      <a class="nhsuk-list-panel__link" href="/conditions/abdominal-aortic-aneurysm/">AAA</a>
    </li>
    <li class="nhsuk-list-panel__item">
      <a class="nhsuk-list-panel__link" href="/conditions/abdominal-aortic-aneurysm/">Abdominal aortic aneurysm</a>
    </li>
    <li class="nhsuk-list-panel__item">
      <a class="nhsuk-list-panel__link" 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">
      <svg class="nhsuk-icon nhsuk-icon__arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M19.6 11.66l-2.73-3A.51.51 0 0 0 16 9v2H5a1 1 0 0 0 0 2h11v2a.5.5 0 0 0 .32.46.39.39 0 0 0 .18 0 .52.52 0 0 0 .37-.16l2.73-3a.5.5 0 0 0 0-.64z"></path>
      </svg>
      Back to top
    </a>
  </div>
</div>

<div class="nhsuk-list-panel">
  <h2 class="nhsuk-list-panel__label" id="B">B</h2>
  <div class="nhsuk-list-panel__box nhsuk-list-panel__box--with-label">
    <p class="nhsuk-list-panel--results-items__no-results">There are currently no conditions listed</p>
  </div>
  <div class="nhsuk-back-to-top">
    <a class="nhsuk-back-to-top__link" href="#nhsuk-nav-a-z">
      <svg class="nhsuk-icon nhsuk-icon__arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M19.6 11.66l-2.73-3A.51.51 0 0 0 16 9v2H5a1 1 0 0 0 0 2h11v2a.5.5 0 0 0 .32.46.39.39 0 0 0 .18 0 .52.52 0 0 0 .37-.16l2.73-3a.5.5 0 0 0 0-.64z"></path>
      </svg>
      Back to top
    </a>
  </div>
</div>

<div class="nhsuk-list-panel">
  <h2 class="nhsuk-list-panel__label" id="C">C</h2>
  <ul class="nhsuk-list-panel__list nhsuk-list-panel__list--with-label">
    <li class="nhsuk-list-panel__item">
      <a class="nhsuk-list-panel__link" href="/conditions/chest-pain/">Chest pain</a>
    </li>
    <li class="nhsuk-list-panel__item">
      <a class="nhsuk-list-panel__link" 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">
      <svg class="nhsuk-icon nhsuk-icon__arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M19.6 11.66l-2.73-3A.51.51 0 0 0 16 9v2H5a1 1 0 0 0 0 2h11v2a.5.5 0 0 0 .32.46.39.39 0 0 0 .18 0 .52.52 0 0 0 .37-.16l2.73-3a.5.5 0 0 0 0-.64z"></path>
      </svg>
      Back to top
    </a>
  </div>
</div>

<div class="nhsuk-list-panel">
  <h2 class="nhsuk-list-panel__label" id="D">D</h2>
  <ul class="nhsuk-list-panel__list nhsuk-list-panel__list--with-label">
    <li class="nhsuk-list-panel__item">
      <a class="nhsuk-list-panel__link" href="/conditions/dandruff/">Dandruff</a>
    </li>
    <li class="nhsuk-list-panel__item">
      <a class="nhsuk-list-panel__link" href="/conditions/dementia/">Dementia</a>
    </li>
    <li class="nhsuk-list-panel__item">
      <a class="nhsuk-list-panel__link" 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">
      <svg class="nhsuk-icon nhsuk-icon__arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M19.6 11.66l-2.73-3A.51.51 0 0 0 16 9v2H5a1 1 0 0 0 0 2h11v2a.5.5 0 0 0 .32.46.39.39 0 0 0 .18 0 .52.52 0 0 0 .37-.16l2.73-3a.5.5 0 0 0 0-.64z"></path>
      </svg>
      Back to top
    </a>
  </div>
</div>
Copy
{% from 'list-panel/macro.njk' import listPanel %}

{{ listPanel({
  "label": "A",
  "id": "A",
  "backToTop": "true",
  "backToTopLink": "#nhsuk-nav-a-z",
  "items": [
    {
      "URL": "/conditions/abdominal-aortic-aneurysm/",
      "link": "AAA"
    },
    {
      "URL": "/conditions/abdominal-aortic-aneurysm/",
      "link": "Abdominal aortic aneurysm"
    },
    {
      "URL": "/conditions/abscess/",
      "link": "Abscess"
    }
  ]
}) }}

{{ listPanel({
  "label": "B",
  "id": "B",
  "disable": "true",
  "backToTop": "true",
  "backToTopLink": "#nhsuk-nav-a-z",
  "message": "There are currently no conditions listed"
}) }}

{{ listPanel({
  "label": "C",
  "id": "C",
  "backToTop": "true",
  "backToTopLink": "#nhsuk-nav-a-z",
  "items": [
    {
      "URL": "/conditions/chest-pain/",
      "link": "Chest pain"
    },
    {
      "URL": "/conditions/cold-sores/",
      "link": "Cold sore"
    }
  ]
}) }}

{{ listPanel({
  "label": "D",
  "id": "D",
  "backToTop": "true",
  "backToTopLink": "#nhsuk-nav-a-z",
  "items": [
    {
      "URL": "/conditions/dandruff/",
      "link": "Dandruff"
    },
    {
      "URL": "/conditions/dementia/",
      "link": "Dementia"
    },
    {
      "URL": "/conditions/toothache/",
      "link": "Dental pain"
    }
  ]
}) }}

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".

Discuss

Discuss the A to Z pattern on GitHub.

Get in touch

If you have a question:

Updated: November 2019

Other patterns