1. Collections Component Guide
  2. Layout header
  3. With left search and navigation
Layout header example

With left search and navigation

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

How it looks (preview)

How to call this example

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