Component
Government navigation
Navigation placed in the header by Slimmer and used by pages which sit under the /government path. This is a markup only component and is not available for preview here. It can be passed a string to mark a link as being active.
How it looks (preview) (preview all)
How to call this component
<%= render "govuk_publishing_components/components/government_navigation", {
} %>Accessibility acceptance criteria
The government navigation component must:
- Be identified as a navigation landmark
Links in the component must:
- accept focus
- be focusable with a keyboard
- be usable with a keyboard
- indicate when they have focus
- change in appearance when touched (in the touch-down state)
- change in appearance when hovered
- be usable with touch
- be usable with voice commands
- have visible text
- have meaningful text
Other examples
With active item (preview)
<%= render "govuk_publishing_components/components/government_navigation", {
active: "departments"
} %>