Service Navigation example

Full width

Normally the width of the component is constrained by a govuk-width-container element, to make it fit within the boundaries of a normal GOV.UK page. If the component is required to be full width, this option removes that class, allowing the component to stretch as wide as possible. This is used in the layout header component in the Content data app.

How it looks (preview)

How to call this example

<%= render "govuk_publishing_components/components/service_navigation", {
  full_width: true,
  navigation_items: [
    {
      text: "Navigation item 1",
      href: "#",
      active: true
    },
    {
      text: "Navigation item 2",
      href: "#"
    },
    {
      text: "Navigation item 3",
      href: "#"
    },
    {
      text: "Navigation item 4",
      href: "#"
    },
    {
      text: "Navigation item 5",
      href: "#"
    }
  ]
} %>