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.
Internal service header
How it works
The name of the service should be left-aligned in the header.
If your users can sign in or out of a service you should include a link for them to do this on the right-hand side of the header.
Variations
If needed this component can include primary navigation items. The navigation sits inside the internal service header component, left-aligned and below the service name. If the links do not fit on the top line they wrap on to a second line.
You should not use this component to show long lists of navigation. If you have a very long list of primary navigation items you should review your service's information architecture.
If you also need secondary navigation you can add the side navigation component.
Mobile view
On smaller viewports (768px wide or less), including mobile, the main navigation links are listed inside a ‘Menu’ located on the right. The menu uses JavaScript: if JavaScript is not available the full navigation remains visible and links wrap onto new lines as needed.
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: