Layout super navigation header
The super navigation header provides a consistent header across GOV.UK.
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
- follow the expected tabbing border
- allow menus to be closed when the escape key is pressed
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 update 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"
} %>Homepage (preview)
This variant is used for the homepage. It toggles the following attributes: hide_button_left_border, hide_logo_text and blue_background
<%= render "govuk_publishing_components/components/layout_super_navigation_header", {
hide_logo_text: true,
hide_button_left_border: true,
blue_background: true,
large_navbar: true
} %>Hide logo text (preview)
Logo text is shown by default. This option allows us to hide the text for the homepage.
<%= render "govuk_publishing_components/components/layout_super_navigation_header", {
hide_logo_text: true
} %>Remove left button border (preview)
The left border for the toggle button is shown by default. This option allows us to hide the text for the homepage.
<%= render "govuk_publishing_components/components/layout_super_navigation_header", {
hide_button_left_border: true
} %>Blue blackground colour (preview)
The black background is shown by default. This option allows us to change the background colour for the homepage.
<%= render "govuk_publishing_components/components/layout_super_navigation_header", {
blue_background: true
} %>