Version
has been released! Read the upgrade guide

Nav

The documentation on this page is considered legacy.

We will be updating this content to our new principle-based format in the near future.

A horizontal or vertical navigation component that supports nesting.

Overview

The Nav component is built to provide a list of navigation links to help people move around a website or application. Navigation links can either be listed vertically or horizontally. Horizontal links will change to vertical on tablet and mobile devices.

Navigation can also be created in different sizes.

In some cases navigation can be combined with other elements. One example of this is a site which uses a large horizontal navigation as its primary navigation method and then hides that navigation when it switches to vertical.

The component provides styling for focus, active and hover. The styles for navigation items is nearly identical to Buttons, to keep a consistent look and feel.

The url provided to a navigation link will be used as the 'to' property of a react router link.

1Anatomy

  1. Container. The Nav component is wrapped in an invisible container. This allows it to be placed inside larger composite components without breaking their visual look.

  2. Link. The Nav links can either be applied vertically or horizontally. These will automatically switch to vertical on Mobile devices to ensure they fit on the screen.

2States

The Nav Links have three states - defaulthover, and active.

3Hierarchy & Placement

The Nav component can be used to link to both top level pages and sub-pages. Try to keep all the links in the same navigation at the same page level. This makes the mental model of your application structure easier to process for the user.

The MOD.UK Design System provides guidance and tools for building high–quality Services within the UK Ministry of Defence. This project is open source and its source code is available on GitHub.

All content is available under the Apache 2.0 licence, except where otherwise stated.

© Crown copyright