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

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

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