Component

Layout header

The header provides the crown logo, product or service name and navigation

Requires the specification of the environment (development, integration, staging or production).

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_header", {
  environment: "production"
} %>

GOV.UK Design System

This component incorporates components from the GOV.UK Design System:

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 Header must:

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

Landmarks and Roles in the 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’.

Staging environment (preview)

<%= render "govuk_publishing_components/components/layout_header", {
  environment: "staging"
} %>

Integration environment (preview)

<%= render "govuk_publishing_components/components/layout_header", {
  environment: "integration"
} %>

Development environment (preview)

<%= render "govuk_publishing_components/components/layout_header", {
  environment: "development"
} %>

With product name (preview)

<%= render "govuk_publishing_components/components/layout_header", {
  environment: "production",
  product_name: "Product"
} %>

With navigation (preview)

<%= render "govuk_publishing_components/components/layout_header", {
  environment: "production",
  navigation_items: [
    {
      text: "Navigation item 1",
      href: "item-1",
      active: true
    },
    {
      text: "Navigation item 2",
      href: "item-2"
    },
    {
      text: "Hidden on desktop",
      href: "item-3",
      show_only_in_collapsed_menu: true
    }
  ]
} %>

With navigation link data attributes (preview)

Supports adding data attributes i.e for tracking

<%= render "govuk_publishing_components/components/layout_header", {
  navigation_items: [
    {
      text: "Departments",
      href: "item-1",
      data: {
        module: "a custom attribute",
        something_else: "some other custom attribute"
      }
    },
    {
      text: "Worldwide",
      href: "item-2"
    }
  ]
} %>

Full width (preview)

This is difficult to preview because the preview windows are constrained, but the header will stretch to the size of its container.

<%= render "govuk_publishing_components/components/layout_header", {
  environment: "production",
  full_width: true
} %>

No bottom border (preview)

This is useful for pages where a large full-width banner is the first thing to appear on the page, for example, the GOV.UK homepage

<%= render "govuk_publishing_components/components/layout_header", {
  remove_bottom_border: true
} %>

With search bar (preview)

<%= render "govuk_publishing_components/components/layout_header", {
  search: true
} %>

With custom logo link (preview)

The header logo links to root by default. This option allows us to override that in certain instances.

<%= render "govuk_publishing_components/components/layout_header", {
  logo_link: "/account/home"
} %>