1. Component Guide
  2. Government navigation

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.

Please note: because the markup on this component is currently tied to styles that aren’t present in the components gem, they will appear “broken”. This is because they are intended to be used in the header component as white links against a black background. You can see a styled example of this component in use on the ‘Counter-Fraud Standards and Profession’ page.

Search for usage of this component on GitHub.

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:

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"
} %>