Skip to main content

Work in progress

This page is a design preview. It may not contain the latest guidance and may not behave as expected.

Current guidance can always be found at design-system.dwp.gov.uk.

Cookies on the DWP Design System website

We use some essential cookies to make this service work.

We’d also like to use analytics cookies so we can understand how you use the service and make improvements.

View cookies
Components
Horizontal navigation

Design notes

Design goals

The purpose of this release was to give users a navigation component that is consistent across services. There are varying designs across DWP services.

What we did

We investigated the different styles of navigation in use and decided to adopt the styling of the prototype X-GOVUK Secondary navigation component. We believe using this styling will help to keep the component consistent across government if and when it is included in the GOV.UK Design System.

What we changed

The X-GOVUK component uses the natural document flow for narrow screens, with no specific mobile styling. Our version stacks the links vertically at the mobile breakpoint as we believe this will make it easier to scan.

The original component has no specific mobile styling

The DWP component sets items on individual lines at smaller screen widths

Making the component available in DWP Frontend will mean DWP designers can use it in prototypes without having to install and maintain another library to use the X-GOVUK version.

Get support

Need help implementing this in a prototype or production build? Get support from the Design System team.

Give feedback

We depend on insights from real projects to update and improve the design system. If you use something we made, tell us how it went.

Could we improve this page?

Send questions, comments or suggestions to the DWP Design System team.

Last updated: