1. Government Frontend Component Guide
  2. Layout header

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

Accessibility acceptance criteria

The component must:

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

Links in the Header 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
  • have visible text

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)

Other examples

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: "#1",
      active: true
    },
    {
      text: "Navigation item 2",
      href: "#2"
    },
    {
      text: "Hidden on desktop",
      href: "#3",
      show_only_in_collapsed_menu: true
    }
  ]
} %>

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