A to Z component

The A to Z component can be used to create a list of links to supporting information/terminology.

Example markup

<ul class="atoz">
    <li class="atoz__item">
        <a class="atoz__link" href="#A">A</a>
    </li>
    <li class="atoz__item">
        <a class="atoz__link atoz__link--active" href="#B">B</a>
    </li>
    <li class="atoz__item">
        <a class="atoz__link" href="#C">C</a>
    </li>
    <li class="atoz__item">
        <a class="atoz__link" href="#D">D</a>
    </li>
    <li class="atoz__item">
        <a class="atoz__link" href="#E">E</a>
    </li>
    <li class="atoz__item">
        <a class="atoz__link" href="#F">F</a>
    </li>
    <li class="atoz__item">
        <a class="atoz__link" href="#G">G</a>
    </li>
    <li class="atoz__item">
        <a class="atoz__link" href="#H">H</a>
    </li>
    <li class="atoz__item">
        <a class="atoz__link" href="#I">I</a>
    </li>
    <li class="atoz__item">
        <a class="atoz__link" href="#J">J</a>
    </li>
    <li class="atoz__item">
        <a class="atoz__link" href="#K">K</a>
    </li>
    <li class="atoz__item">
        <a class="atoz__link" href="#L">L</a>
    </li>
    <li class="atoz__item">
        <a class="atoz__link" href="#M">M</a>
    </li>
    <li class="atoz__item">
        <a class="atoz__link" href="#N">N</a>
    </li>
    <li class="atoz__item">
        <a class="atoz__link" href="#O">O</a>
    </li>
    <li class="atoz__item">
        <a class="atoz__link" href="#P">P</a>
    </li>
    <li class="atoz__item">
        <a class="atoz__link" href="#Q">Q</a>
    </li>
    <li class="atoz__item">
        <a class="atoz__link" href="#R">R</a>
    </li>
    <li class="atoz__item">
        <a class="atoz__link" href="#S">S</a>
    </li>
    <li class="atoz__item">
        <a class="atoz__link" href="#T">T</a>
    </li>
    <li class="atoz__item">
        <a class="atoz__link" href="#U">U</a>
    </li>
    <li class="atoz__item">
        <a class="atoz__link" href="#V">V</a>
    </li>
    <li class="atoz__item">
        <a class="atoz__link" href="#W">W</a>
    </li>
    <li class="atoz__item">
        <a class="atoz__link" href="#X">X</a>
    </li>
    <li class="atoz__item">
        <a class="atoz__link" href="#Y">Y</a>
    </li>
    <li class="atoz__item">
        <a class="atoz__link" href="#Z">Z</a>
    </li>
</ul>

Example output

Letters without any associated entries should be omitted from the A to Z.

An additional CSS class (atoz__link--active) should be applied to the link for the selected letter.


Did you find this information helpful?

Rating Did you find the information helpful?

We aren't able to reply to individual comments, so please don't include any personal details.

Subscribe to our newsletters for latest news and events.