Navigation grid

The navigation grid pattern displays a grid of simple text links with optional supporting descriptions. This pattern works best for links that are considered secondary to other items on the page. For links deserving greater visual importance the navbox grid is more suitable.

Rules for the navigation grid

Must only be used within the main body of the page and using the content whole page layout.
Links must only link to an internal webpage or web application.
Links should not be longer than 40 chars.
Links must be underlined.
Supporting descriptions should not be longer than 160 chars and must be plain text.
If a link has an associated supporting description then all other links in the grid must also have supporting descriptions.
Supporting descriptions should be used to give further context on where a link navigates to. This is especially important if the link text contains acronyms or other cryptic content.

Options available

Links with descriptions
Links only
With visible heading
Ordered vertically by column
Ordered vertically by column - ignore grid

Links with descriptions

A grid of links with associated descriptions.

Example

Admissions

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim nostrud exercitation.
English Language Teaching

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua.
Environmental, Health and Safety Services

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim nostrud exercitation.
Museum Collections

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Research and Innovation Services

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim nostrud exercitation.
Student Services

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim nostrud exercitation.

Code

<!-- Begin pattern: navigation-grid //-->
<nav class="navigation-grid" aria-labelledby="with-descriptions">
    <div class="container">
        <h2 id="with-descriptions" class="navigation-grid__heading sr-only">Heading label</h2>
        <ul class="navigation-grid__items">
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Admissions</a></h3>
                <p class="navigation-grid-item__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim nostrud exercitation.</p>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">English Language Teaching</a></h3>
                <p class="navigation-grid-item__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Environmental, Health and Safety Services</a></h3>
                <p class="navigation-grid-item__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim nostrud exercitation.</p>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Museum Collections</a></h3>
                <p class="navigation-grid-item__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Research and Innovation Services</a></h3>
                <p class="navigation-grid-item__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim nostrud exercitation.</p>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Student Services</a></h3>
                <p class="navigation-grid-item__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim nostrud exercitation.</p>
            </li>
        </ul>
    </div>
</nav>
<!-- End pattern: navigation-grid //-->

Links only

A simple grid of links.

Example

Code

<!-- Begin pattern: navigation-grid //-->
<nav class="navigation-grid" aria-labelledby="links-only">
    <div class="container">
        <h2 id="links-only" class="navigation-grid__heading sr-only">Heading label</h2>
        <ul class="navigation-grid__items">
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Undergraduate</a></h3>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Postgraduate</a></h3>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Non-degree courses</a></h3>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Study abroad</a></h3>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">International</a></h3>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Access and outreach</a></h3>
            </li>
        </ul>
    </div>
</nav>
<!-- End pattern: navigation-grid //-->

With visible heading

While the heading label should always be provided for assistive technology users it may also be appropriate to display it.

Example

Code

<!-- Begin pattern: navigation-grid //-->
<nav class="navigation-grid" aria-labelledby="visible-heading">
    <div class="container">
        <h2 id="visible-heading" class="navigation-grid__heading">Heading label</h2>
        <ul class="navigation-grid__items navigation-grid__items--vertical">
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Undergraduate</a></h3>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Postgraduate</a></h3>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Non-degree courses</a></h3>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Study abroad</a></h3>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">International</a></h3>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Access and outreach</a></h3>
            </li>
        </ul>
    </div>
</nav>
<!-- End pattern: navigation-grid //-->

Ordered vertically by column

By default, navigation items are placed horizontally by row, with any remaining items moving onto the next row. However it is possible to change this ordering to a vertical order by column by adding the class .navigation-grid__items--vertical.

Example

Academic policies

Documents related to the University’s taught programmes, including assessment, curriculum development, good academic practice, timetabling and more.
Estate

Estate policies and procedures governing the University’s environment management, facilities, safety and security, and space planning.
External relations

Documents relating to University relationships with key stakeholders such as alumni, the public, donors and other relevant parties.
Extra-curricular services

The provision through which the extra-curricular services are delivered and managed, such as the Library, Careers etc.
Financial matters

Financial resources policies and procedures, including asset management, charitable donations, expenses and claims, budget management and more.
Health and safety

The measures and controls through which the University aims to provide a safe environment.
Information governance and management

The measures and controls to provide individuals with their rights over personal data and access to information and management of University records.
Information technology

Standards for establishing, monitoring and maintaining information technology, such as website development and network connection.
Purchasing and procurement

Procurement policies and procedures including tendering for a supplier and purchasing goods or services from external parties.
Research

Academic research policies and guidance around conduct and ethics, quality assurance of research, promoting research outputs in useable forms, and more.
Staff

Staff management policies including performance and progression, equality and diversity, health and wellbeing, pay and benefits, recruitment, and more.
Student administration

Policies and procedures relating to student contracts, admissions, fees and finance, matriculation and discipline.
Student support

Documents related to a welfare and support service for all matriculated students, including emotional support, mental health and visa advice.
University governance

Mechanisms by which the University will be directed and controlled, including the structures of the Court and Senate along with other oversight operations.

Code

<!-- Begin pattern: navigation-grid //-->
<nav class="navigation-grid" aria-labelledby="vertical-order">
    <div class="container">
        <h2 id="vertical-order" class="navigation-grid__heading sr-only">Policy categories</h2>
        <ul class="navigation-grid__items navigation-grid__items--vertical">
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Academic policies</a></h3>
                <p class="navigation-grid-item__description">Documents related to the University’s taught programmes, including assessment, curriculum development, good academic practice, timetabling and more.</p>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Estate</a></h3>
                <p class="navigation-grid-item__description">Estate policies and procedures governing the University’s environment management, facilities, safety and security, and space planning.</p>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">External relations</a></h3>
                <p class="navigation-grid-item__description">Documents relating to University relationships with key stakeholders such as alumni, the public, donors and other relevant parties.</p>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Extra-curricular services</a></h3>
                <p class="navigation-grid-item__description">The provision through which the extra-curricular services are delivered and managed, such as the Library, Careers etc.</p>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Financial matters</a></h3>
                <p class="navigation-grid-item__description">Financial resources policies and procedures, including asset management, charitable donations, expenses and claims, budget management and more.</p>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Health and safety</a></h3>
                <p class="navigation-grid-item__description">The measures and controls through which the University aims to provide a safe environment.</p>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Information governance and management</a></h3>
                <p class="navigation-grid-item__description">The measures and controls to provide individuals with their rights over personal data and access to information and management of University records.</p>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Information technology</a></h3>
                <p class="navigation-grid-item__description">Standards for establishing, monitoring and maintaining information technology, such as website development and network connection.</p>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Purchasing and procurement</a></h3>
                <p class="navigation-grid-item__description">Procurement policies and procedures including tendering for a supplier and purchasing goods or services from external parties.</p>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Research</a></h3>
                <p class="navigation-grid-item__description">Academic research policies and guidance around conduct and ethics, quality assurance of research, promoting research outputs in useable forms, and more.</p>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Staff</a></h3>
                <p class="navigation-grid-item__description">Staff management policies including performance and progression, equality and diversity, health and wellbeing, pay and benefits, recruitment, and more.</p>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Student administration</a></h3>
                <p class="navigation-grid-item__description">Policies and procedures relating to student contracts, admissions, fees and finance, matriculation and discipline.</p>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Student support</a></h3>
                <p class="navigation-grid-item__description">Documents related to a welfare and support service for all matriculated students, including emotional support, mental health and visa advice.</p>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">University governance</a></h3>
                <p class="navigation-grid-item__description">Mechanisms by which the University will be directed and controlled, including the structures of the Court and Senate along with other oversight operations.</p>
            </li>
        </ul>
    </div>
</nav>
<!-- End pattern: navigation-grid //-->

Ordered vertically by column - ignore grid

The vertical ordering into columns has a second option that ignores the grid layout and positions the items evenly underneath each other into columns. Use the class .navigation-grid__items--vertical-flow for this variant of vertical layout.

This option must only be used for navigation grids that do not include descriptions. If links have descriptions then they must follow either a horizontal or vertical grid.

Example

Code

<!-- Begin pattern: navigation-grid //-->
<nav class="navigation-grid" aria-labelledby="vertical-flow">
    <div class="container">
        <h2 id="vertical-flow" class="navigation-grid__heading">Subjects</h2>
        <ul class="navigation-grid__items navigation-grid__items--vertical-flow">
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Ancient History</a></h3>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Arabic</a></h3>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Archaeology</a></h3>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Art History</a></h3>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Biology</a></h3>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Chemistry</a></h3>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Classics and Classical Studies</a></h3>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Comparative Literature</a></h3>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Computer Science</a></h3>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Creative Writing</a></h3>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Divinity</a></h3>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Earth and Environmental Sciences</a></h3>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Economics and Finance</a></h3>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">English</a></h3>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">English Language Teaching</a></h3>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Film Studies</a></h3>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">French</a></h3>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Geography</a></h3>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">German</a></h3>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Greek</a></h3>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">History</a></h3>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Interdisciplinary Studies</a></h3>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">International Relations</a></h3>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Italian</a></h3>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Latin</a></h3>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Management</a></h3>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Marine Biology</a></h3>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Mathematics</a></h3>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Mediaeval Studies</a></h3>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Medicine</a></h3>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Middle East Studies</a></h3>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Music</a></h3>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Neuroscience</a></h3>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Persian</a></h3>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Philosophy</a></h3>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Physics and Astronomy</a></h3>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Psychology</a></h3>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Russian</a></h3>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Social Anthropology</a></h3>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Spanish</a></h3>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Statistics</a></h3>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Sustainable Development</a></h3>
            </li>
            <li class="navigation-grid-item">
                <h3 class="navigation-grid-item__heading"><a href="#">Teaching English to Speakers of Other Languages (TESOL)</a></h3>
            </li>
        </ul>
    </div>
</nav>
<!-- End pattern: navigation-grid //-->