When we need an alphabetical list, for example on course pages.

<div class="c-atoz">
  <ul class="c-atoz__nav-list">
    <li class="c-atoz__nav-item"><a class="c-atoz__nav-link" href="#A">A</a></li>
    <li class="c-atoz__nav-item"><a class="c-atoz__nav-link" href="#B">B</a></li>
    <li class="c-atoz__nav-item"><a class="c-atoz__nav-link" href="#C">C</a></li>
  </ul>
  <ul class="c-atoz__container">
    <li id="A" class="c-atoz__letter">
      <h5 class="c-atoz__letter-title">A</h5>
      <ul class="c-atoz__content">
        <li class="c-atoz__page">
          <a class="c-atoz__link" href="#">
            <h6 class="c-atoz__title">Accounting, Business Finance and Management</h6>
            <ul>
              <li>BSc</li>
              <li>3 years</li>
              <li>Single Subject</li>
              <li>NN42</li>
            </ul>
          </a>
        </li>
        <li class="c-atoz__page">
          <a class="c-atoz__link" href="#">
            <h6 class="c-atoz__title">Accounting, Business Finance and Management (with a year in industry)</h6>
            <ul>
              <li>BSc</li>
              <li>4 years</li>
              <li>Single Subject</li>
              <li>NN4F</li>
            </ul>
          </a>
        </li>
        <li class="c-atoz__page">
          <a class="c-atoz__link" href="#">
            <h6 class="c-atoz__title">Applied Social Science</h6>
            <ul>
              <li>BA</li>
              <li>3 years</li>
              <li>Single Subject</li>
              <li>L431</li>
            </ul>
          </a>
        </li>
        <li class="c-atoz__page">
          <a class="c-atoz__link" href="#">
            <h6 class="c-atoz__title">Applied Social Science (Children and Young People)</h6>
            <ul>
              <li>BA</li>
              <li>3 years</li>
              <li>Single Subject</li>
              <li>L432</li>
            </ul>
          </a>
        </li>
      </ul>
    </li>
    <li id="B" class="c-atoz__letter">
      <h5 class="c-atoz__letter-title">B</h5>
      <ul class="c-atoz__content">
        <li class="c-atoz__page">
          <a class="c-atoz__link" href="#">
            <h6 class="c-atoz__title">Bioarchaeology</h6>
            <ul>
              <li>BSc</li>
              <li>3 years</li>
              <li>Single Subject</li>
              <li>V403</li>
            </ul>
          </a>
        </li>
        <li class="c-atoz__page">
          <a class="c-atoz__link" href="#">
            <h6 class="c-atoz__title">Biochemistry</h6>
            <ul>
              <li>BSc</li>
              <li>4 years</li>
              <li>Combined</li>
              <li>C700</li>
            </ul>
          </a>
        </li>
        <li class="c-atoz__page">
          <a class="c-atoz__link" href="#">
            <h6 class="c-atoz__title">Biochemistry</h6>
            <ul>
              <li>MBiochem</li>
              <li>4 years</li>
              <li>Combined</li>
              <li>C706</li>
            </ul>
          </a>
        </li>
      </ul>
    </li>
    <li id="C" class="c-atoz__letter">
      <h5 class="c-atoz__letter-title">C</h5>
      <ul class="c-atoz__content">
        <li class="c-atoz__page">
          <a class="c-atoz__link" href="#">
            <h6 class="c-atoz__title">Chemistry</h6>
            <ul>
              <li>MChem</li>
              <li>4 years</li>
              <li>Single Subject</li>
              <li>F103</li>
            </ul>
          </a>
        </li>
        <li class="c-atoz__page">
          <a class="c-atoz__link" href="#">
            <h6 class="c-atoz__title">Chemistry</h6>
            <ul>
              <li>BSc</li>
              <li>3 years</li>
              <li>Single Subject</li>
              <li>F100</li>
            </ul>
          </a>
        </li>
        <li class="c-atoz__page">
          <a class="c-atoz__link" href="#">
            <h6 class="c-atoz__title">Chemistry (with a year abroad)</h6>
            <ul>
              <li>MChem</li>
              <li>4 years</li>
              <li>Single Subject</li>
              <li>F101</li>
            </ul>
          </a>
        </li>
        <li class="c-atoz__page">
          <a class="c-atoz__link" href="#">
            <h6 class="c-atoz__title">Chemistry (with a year in industry)</h6>
            <ul>
              <li>MChem</li>
              <li>4 years</li>
              <li>Single Subject</li>
              <li>F102</li>
            </ul>
          </a>
        </li>
        <li class="c-atoz__page">
          <a class="c-atoz__link" href="#">
            <h6 class="c-atoz__title">Chemistry, Biological &amp; Medicinal Chemistry</h6>
            <ul>
              <li>BSc</li>
              <li>3 years</li>
              <li>Single Subject</li>
              <li>F152</li>
            </ul>
          </a>
        </li>
        <li class="c-atoz__page">
          <a class="c-atoz__link" href="#">
            <h6 class="c-atoz__title">Chemistry, Biological &amp; Medicinal Chemistry</h6>
            <ul>
              <li>MChem</li>
              <li>4 years</li>
              <li>Single Subject</li>
              <li>F155</li>
            </ul>
          </a>
        </li>
      </ul>
    </li>
  </ul>
</div>

Options

Atoms

• pages

  • link: the URL to link to
  • title: the title to appear as the header to the link
  • content: (optional) an HTML string to add to the link

• letter: the letter relevant to this section

Molecules

• letters: an object with a letter and an array of pages

• atoz: an array of letters