Unofficial
Internal
Components
Service navigation
Service navigation helps users understand that they’re using your service and lets them navigate around your service.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| id | string | - | 'id' attribute to place on the base HTML element |
| classBlock | string | - | Block name override in BEM style classes applied to all elements |
| classModifiers | Modifiers | - | BEM style modifiers to apply to the base HTML element |
| className | string | - | Extra classes to apply to the base HTML element |
| end | ReactNode | - | Elements to be injected at the end of the service header container |
| items | Anchor[] | [] | List of links to choose from |
| maxContentsWidth | number | - | Maximum width of the contents in px units (-1 for full width) |
| menuButtonText | string | "Menu" | The text of the mobile navigation menu toggle |
| menuButtonLabel | string | - | The screen reader label for the mobile navigation menu toggle |
| navigationLabel | string | - | The screen reader label for the mobile navigation menu. Defaults to the same value as menuButtonText if not specified. |
| navigationId | string | "navigation" | The ID used to associate the mobile navigation toggle with the navigation menu. |
| serviceHref | string | - | Service link URL |
| serviceName | string | - | Service link text |
| signOutHref | string | - | Sign out link URL |
| signOutText | string | "Sign out" | Sign out link text |
| start | ReactNode | - | Elements to be injected at the start of the service header container |
When to use this component
Use the Service navigation to help users understand that they’re using your service.
To decide when to use navigation links in your service, see the Help users to navigate a service pattern.
How it works
Together, the GOV.UK header component and Service navigation component ensure users get a consistent experience on GOV.UK.
This also assures users that they’re in the right place to use your service and to understand that GOV.UK functions as one website.
For guidance on how to plan your header and navigation, see the [Help users navigate a service pattern].
Showing your service name only
We recommend that you use the Service navigation component to show your service name, instead of the GOV.UK header, and to start updating existing services.
Showing service name and navigation links
Show navigation links to let users navigate to different parts of your service and find useful links and tools.
See when and how to show navigation links in the [Help users navigate a service pattern].
Showing service name and sign-out link
Unofficial
A sign-out link can be provided and added to the end of the list of navigation links.