Horizontal list

The horizontal list can be used to display groups of related links in a structured format that adapts to smaller width displays.

Rules for horizontal list

This pattern should not be used a replacement for the navigation bar.
It should be used to provide secondary links supporting other content, for example the search bar.
A suitable heading should be used to introduce the list of links. This is visible to screen readers at all sizes and also functions as a collapsed menu toggle on smaller displays.
If the number of links wrap on to more than one line condense this list into groups using the priority+ list option.

Simple list

This example is a simple list of links with the top and bottom margins removed using the no-margin-top and no-margin-bottom classes.

Example

Code

<!-- Begin pattern: horizontal-list //-->
<div class="horizontal-list no-margin-top no-margin-bottom">
    <h4 class="horizontal-list__toggle" aria-expanded="false">
        <button class="horizontal-list__toggle-button">Additional options</button>
    </h4>
    <ul>
        <li><a href="#">Option one</a></li>
        <li><a href="#">Another option</a></li>
        <li><a href="#">Option three</a></li>
    </ul>
</div>
<!-- End pattern: horizontal-list //-->

Priority+ list

Additional links can be grouped into categories to limit the number that are initially shown. This is useful in situations where the links would otherwise wrap on to more than one line or some links warrant more importance than others.

Any dropdown lists must be placed last.
List items should be placed in order of importance, with most important first.

Example

Code

<!-- Begin pattern: horizontal-list //-->
<div class="horizontal-list">
    <h4 class="horizontal-list__toggle">
        <button class="horizontal-list__toggle-button" aria-expanded="false">Popular searches</button>
    </h4>
    <ul>
        <li><a href="#">Upcoming events</a></li>
        <li><a href="#">Today</a></li>
        <li><a href="#">This week</a></li>
        <li><a href="#">This month</a></li>
        <li><a href="#">All events</a></li>
        <li class="dropdown-wrapper">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-controls="more-options" role="button">More options</a>
            <ul class="dropdown-menu" id="more-options">
                <li><a href="#">Events open to the public</a></li>
                <li><a href="#">Events for staff and students</a></li>
                <li><a href="#">Lectures</a></li>
                <li><a href="#">Seminars</a></li>
                <li><a href="#">Workshops</a></li>
                <li><a href="#">Chaplaincy events</a></li>
                <li><a href="#">Music events</a></li>
                <li><a href="#">Museum events</a></li>
                <li><a href="#">Theatre events</a></li>
            </ul>
        </li>
    </ul>
</div>
<!-- End pattern: horizontal-list //-->