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
Code



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
Code



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