A-to-Z

For displaying lists of links alphabetically and useful when you have a lot of links on one page.

Default A-to-Z

<h2 class="is-size-3 has-heading-line">A-Z of services</h2>
<nav class="pagination is-centered" role="navigation" aria-label="pagination">
    <ul class="pagination-list">
        <li><a class="pagination-link" href="#a">A</a></li>
        <li><a class="pagination-link" href="#b">B</a></li>
        <li><a class="pagination-link" href="#c">C</a></li>
        <li><a class="pagination-link" href="#e">E</a></li>
        <li><a class="pagination-link" href="#f">F</a></li>
        <li><a class="pagination-link" href="#h">H</a></li>
    </ul>
</nav>
<h3><a class="anchor" id="a"></a>A</h3>
<ul>
    <li><a href="#">Academic Advisors</a></li>
    <li><a href="#">Accommodation Bureau</a></li>
</ul>
<h3><a class="anchor" id="b"></a>B</h3>
<ul>
    <li><a href="#">Brookes Union</a></li>
    <li><a href="#">BrookesBus</a></li>
</ul>
<h3><a class="anchor" id="c"></a>C</h3>
<ul>
    <li><a href="#">Careers Centre</a></li>
    <li><a href="#">Chaplaincy</a></li>
    <li><a href="#">Computer Services</a></li>
    <li><a href="#">Computer Services - Eduroam</a></li>
    <li><a href="#">Computer Services - Google Apps (includes Email and Calendar)</a></li>
    <li><a href="#">Computer Services - HallNet</a></li>
    <li><a href="#">Council Tax Exemptions</a></li>
    <li><a href="#">Cycling</a></li>
</ul>
<h3><a class="anchor" id="e"></a>E</h3>
<ul>
    <li><a href="#">Exchanges and Study Abroad</a></li>
</ul>
<h3><a class="anchor" id="f"></a>F</h3>
<ul>
    <li><a href="#">Facebook - Oxford Brookes University</a></li>
    <li><a href="#">Finance - Financial Aid</a></li>
    <li><a href="#">Finance - Student Finance</a></li>
    <li><a href="#">Finance - Student Finance England</a></li>
    <li><a href="#">Frequently Asked Questions (FAQs)</a></li>
</ul>
<h3><a class="anchor" id="h"></a>H</h3>
<ul>
    <li><a href="#">HallNet</a></li>
    <li><a href="#">Health - Dental</a></li>
    <li><a href="#">Health - Disability Service</a></li>
    <li><a href="#">Health - Dyslexia/SpLD Service</a></li>
    <li><a href="#">Health - Medical Centre</a></li>
</ul>
<h3><a class="anchor" id="i"></a>I</h3>
<ul>
    <li><a href="#">Induction Timetable</a></li>
    <li><a href="#">International Student Advisory Team</a></li>
</ul>
<h3><a class="anchor" id="l"></a>L</h3>
<ul>
    <li><a href="#">Library - Harcourt Hill</a></li>
    <li><a href="#">Library - Headington</a></li>
    <li><a href="#">Library - Home Page</a></li>
    <li><a href="#">Library - Reading Lists</a></li>
    <li><a href="#">Library - Teach Yourself How to Use the Library</a></li>
</ul>

Usage

  • Do not link letters that don't have links.
  • Each title should have an empty link with an anchor class, for example. <h3><a class="anchor" id="a"></a>A</h3>
  • Do not add a title to the link if the text for the link is the same.
  • Use the .is-centered class to centre a to z links.

Accessibility

Use correct headings, for example, if the preceding heading is an h2, use h3 for the anchor headings.

Avoid opening links in a new tab or window.  This can be disorienting for people with low vision or who are navigating via screen reader, especially when there is no warning.


If you have any questions or suggestions for improvements, please contact the Web Team.