Component

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

With custom logo link (preview)

The header logo links to root by default. This option allows us to override that in certain instances. Remember to change the title, as the default is “Go to the GOV.UK homepage”.

<%= render "govuk_publishing_components/components/layout_super_navigation_header", {
  logo_link: "https://www.example.com",
  logo_link_title: "Go to example"
} %>