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
A grid of links with associated descriptions.
Example
Heading label
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim nostrud exercitation.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim nostrud exercitation.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim nostrud exercitation.
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
Heading label
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim nostrud exercitation.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim nostrud exercitation.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim nostrud exercitation.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim nostrud exercitation.
Links only
A simple grid of links.
Example
Code
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
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
Policy categories
Documents related to the University’s taught programmes, including assessment, curriculum development, good academic practice, timetabling and more.
Estate policies and procedures governing the University’s environment management, facilities, safety and security, and space planning.
Documents relating to University relationships with key stakeholders such as alumni, the public, donors and other relevant parties.
The provision through which the extra-curricular services are delivered and managed, such as the Library, Careers etc.
Financial resources policies and procedures, including asset management, charitable donations, expenses and claims, budget management and more.
The measures and controls through which the University aims to provide a safe environment.
The measures and controls to provide individuals with their rights over personal data and access to information and management of University records.
Standards for establishing, monitoring and maintaining information technology, such as website development and network connection.
Procurement policies and procedures including tendering for a supplier and purchasing goods or services from external parties.
Academic research policies and guidance around conduct and ethics, quality assurance of research, promoting research outputs in useable forms, and more.
Staff management policies including performance and progression, equality and diversity, health and wellbeing, pay and benefits, recruitment, and more.
Policies and procedures relating to student contracts, admissions, fees and finance, matriculation and discipline.
Documents related to a welfare and support service for all matriculated students, including emotional support, mental health and visa advice.
Mechanisms by which the University will be directed and controlled, including the structures of the Court and Senate along with other oversight operations.
Code
Policy categories
Documents related to the University’s taught programmes, including assessment, curriculum development, good academic practice, timetabling and more.
Estate policies and procedures governing the University’s environment management, facilities, safety and security, and space planning.
Documents relating to University relationships with key stakeholders such as alumni, the public, donors and other relevant parties.
The provision through which the extra-curricular services are delivered and managed, such as the Library, Careers etc.
Financial resources policies and procedures, including asset management, charitable donations, expenses and claims, budget management and more.
The measures and controls through which the University aims to provide a safe environment.
The measures and controls to provide individuals with their rights over personal data and access to information and management of University records.
Standards for establishing, monitoring and maintaining information technology, such as website development and network connection.
Procurement policies and procedures including tendering for a supplier and purchasing goods or services from external parties.
Academic research policies and guidance around conduct and ethics, quality assurance of research, promoting research outputs in useable forms, and more.
Staff management policies including performance and progression, equality and diversity, health and wellbeing, pay and benefits, recruitment, and more.
Policies and procedures relating to student contracts, admissions, fees and finance, matriculation and discipline.
Documents related to a welfare and support service for all matriculated students, including emotional support, mental health and visa advice.
Mechanisms by which the University will be directed and controlled, including the structures of the Court and Senate along with other oversight operations.
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