1. 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) (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

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

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 left search and navigation (preview)

This supports pages where the search appears on the left with multiple navigation links on the right, such as the How government works page

<%= render "govuk_publishing_components/components/layout_header", {
  search_left: true,
  navigation_items: [
    {
      text: "Departments",
      href: "item-1"
    },
    {
      text: "Worldwide",
      href: "item-2"
    },
    {
      text: "How government works",
      href: "item-3"
    },
    {
      text: "Get involved",
      href: "item-4"
    },
    {
      text: "Consultations",
      href: "item-4"
    },
    {
      text: "Statistics",
      href: "item-5"
    },
    {
      text: "News and communications",
      href: "item-6",
      active: true
    }
  ]
} %>

With custom navigation aria label (preview)

The navigation has aria-label="Top level" by default. This option is here for when the aria-label needs to be more descriptive than that.

<%= render "govuk_publishing_components/components/layout_header", {
  search_left: true,
  navigation_aria_label: "Departments and policy",
  navigation_items: [
    {
      text: "Departments",
      href: "item-1"
    },
    {
      text: "Worldwide",
      href: "item-2"
    },
    {
      text: "How government works",
      href: "item-3"
    },
    {
      text: "Get involved",
      href: "item-4"
    },
    {
      text: "Consultations",
      href: "item-4"
    },
    {
      text: "Statistics",
      href: "item-5"
    },
    {
      text: "News and communications",
      href: "item-6",
      active: 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
} %>

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