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
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

Standard options

This component uses the component wrapper helper. It accepts the following options and applies them to the parent element of the component. See the component wrapper helper documentation for more detail.

id - accepts a string for the element ID attribute
data_attributes - accepts a hash of data attributes
aria - accepts a hash of aria attributes
classes - accepts a space separated string of classes, these should not be used for styling and must be prefixed with js-
margin_bottom - accepts a number from 0 to 9 (0px to 60px) using the GOV.UK Frontend spacing scale (defaults to no margin)
role - accepts a space separated string of roles
lang - accepts a language attribute value
open - accepts an open attribute value (true or false)
hidden - accepts an empty string, ‘hidden’, or ‘until-found’
tabindex - accepts an integer. The integer can also be passed as a string
dir - accepts ‘rtl’, ‘ltr’, or ‘auto’
type - accepts any valid type attribute e.g. ‘button’, ‘submit’, ‘text’
rel - accepts any valid rel attribute e.g. ‘nofollow’
target - accepts a valid target attribute e.g. ‘_blank’
title - accepts any string
draggable - accepts a draggable attribute value (“true” or “false”)

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

Large navbar (preview)

Make the links and buttons large on desktop only. Used for the homepage.

<%= render "govuk_publishing_components/components/layout_super_navigation_header", {
  large_navbar: true,
  hide_logo_text: true
} %>