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
<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">
              <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">
              <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">
              <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">
              <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">
              <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">
              <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">
              <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">
              <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">
              <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">
              <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">
              <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">
              <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">
              <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">
              <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">
              <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">
              <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">
              <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">
              <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">
              <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">
              <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">
              <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">
              <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">
              <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">
              <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">
              <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">
              <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 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-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-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-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>
    </div>

  </main>
</div>
Close default a to z page code
Copy 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">
            <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">
            <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">
            <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">
            <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">
            <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">
            <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">
            <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">
            <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">
            <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">
            <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">
            <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">
            <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">
            <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">
            <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">
            <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">
            <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">
            <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">
            <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">
            <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">
            <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">
            <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">
            <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">
            <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">
            <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">
            <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">
            <a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#Z">Z</a>
          </li>
        </ol>
      </nav>

      {{ 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>"
        }) }}

      {{ 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>"
        }) }}  

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

      {{ 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>"
        }) }}

      {# {{ 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"
          }
        ]
      }) }} #}

      {{ 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>"
        }) }}

      {# {{ 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"
          }
        ]
      }) }} #}

    </div>
  </div>
{% endblock %}
Close default a to z page code

The A to Z is made up of:

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 this navigation a to z page example in new window

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
<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-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-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-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>
Close panel a to z page code
Copy panel a to z page code
{% from 'card/macro.njk' import card %}

{{ 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>"
        }) }}

{{ 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>"
        }) }}

{{ 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>"
        }) }}

{{ 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>"
        }) }}
Close panel a to z page code

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

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.

Before you start, you will need a GitHub account. It's an open forum where we collect feedback.

If you have any questions, you can message us on Slack. You will need a Slack account if you do not have one. Or you can contact us by email.

Updated: February 2019