Navigation bar

The navigation bar pattern displays a horizontal navigation menu for pages related to the current page.

Rules for the navigation bar

Must be present on all webpages, apart from long-form stories and web applications.
Must come below the category header and above the breadcrumbs and main body of the page.
Must not contain any dropdown menus.
Must only contain links to other webpages or web applications.
The link with highest priority should be placed at the left hand side, with other links following in order of importance.
Link titles should be concise, with the list of links kept to a single horizontal row.

Primary navigation

The primary navigation menu is required on all top-level pages and must use the primary palette colour.

Example

Code

<!-- Begin pattern: navigation-bar //-->
<nav class="navigation-bar" aria-label="Main menu">
    <div class="container">
        <div class="toggle-navigation primary-toggle">
            <button class="navigation-button" aria-expanded="false" aria-controls="primary-nav">Navigation<i class="chevron down" aria-hidden="true"></i></button>
        </div>
        <ul class="navigation-bar-nav primary-nav" id="primary-nav">
            <li>
                <span class="currentbranch0">
                <a href="#">Undergraduate</a>
                </span>
            </li>
            <li>
                <a href="#">Postgraduate</a>
            </li>
            <li>
                <a href="#">Non-degree courses</a>
            </li>
            <li>
                <a href="#">Study abroad</a>
            </li>
            <li>
                <a href="#">International</a>
            </li>
            <li>
                <a href="#">Access and outreach</a>
            </li>
            <li>
                <a href="#">Courses</a>
            </li>
        </ul>
    </div>
</nav>
<!-- End pattern: navigation-bar //-->

Primary and secondary navigation

The secondary navigation bar is required on all subpages of a section and must use the secondary palette colour.

Example

Code

<!-- Begin pattern: navigation-bar //-->
<nav class="navigation-bar" aria-label="Main menu">
    <div class="container">
        <div class="toggle-navigation primary-toggle">
            <button class="navigation-button" aria-expanded="false" aria-controls="primary-nav">Navigation<i class="chevron down" aria-hidden="true"></i></button>
        </div>
        <ul class="navigation-bar-nav primary-nav" id="primary-nav">
            <li>
                <span class="currentbranch0">
                <a href="#">Undergraduate</a>
                </span>
            </li>
            <li>
                <a href="#">Postgraduate</a>
            </li>
            <li>
                <a href="#">Non-degree courses</a>
            </li>
            <li>
                <a href="#">Study abroad</a>
            </li>
            <li>
                <a href="#">International</a>
            </li>
            <li>
                <a href="#">Access and outreach</a>
            </li>
            <li>
                <a href="#">Courses</a>
            </li>
        </ul>
    </div>
</nav>
<nav class="navigation-bar subnav" aria-label="Secondary menu">
    <div class="container">
        <div class="toggle-navigation secondary-toggle">
            <button class="navigation-button" aria-expanded="false" aria-controls="secondary-nav">Section navigation<i class="chevron down" aria-hidden="true"></i></button>
        </div>
        <ul class="navigation-bar-nav secondary-nav" id="secondary-nav">
            <li>
                <a href="#">Study options</a>
            </li>
            <li>
                <a href="#">Why St Andrews?</a>
            </li>
            <li>
                <a href="#">Fees and funding</a>
            </li>
            <li>
                <a href="#">Accommodation</a>
            </li>
            <li>
                <a href="#">Your future</a>
            </li>
            <li>
                <a href="#">Meet us</a>
            </li>
            <li>
                <a href="#">How to apply</a>
            </li>
        </ul>
    </div>
</nav>
<!-- End pattern: navigation-bar //-->