1. Component Guide
  2. Layout super navigation header

Layout super navigation header

The super navigation header provides a consistent header across GOV.UK.

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

How to call this component

<%= render "govuk_publishing_components/components/layout_super_navigation_header", {
} %>

Accessibility acceptance criteria

The component must:

  • have a text contrast ratio higher than 4.5:1 against the background colour to meet WCAG AA

Images in the super navigation header must:

  • be presentational when linked to from accompanying text (crown icon).

Landmarks and Roles in the super navigation header should:

  • have a role of banner at the root of the component (<header>) (ARIA 1.1)

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