The navigation grid pattern displays a grid of simple text links with optional supporting descriptions. This pattern would work best for links that are considered secondary to other items on the page. For links deserving greater visual importance the navbox grid would be 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.
While the heading label should always be provided for screen reader users it may also be appropriate to display it.
Example
Code
Ordered vertically by column
The default placement of navigation items is horizontally by row, with any remaining items moving onto the subsequent 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 instead 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 items make use of descriptions then they must follow either a horizontal or vertical grid.