1. Collections 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.

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