Flexible section

Breadcrumbs

Navigational breadcrumbs, showing page hierarchy

This flexible section is a wrapper for the breadcrumbs component.

Overview

How it looks (preview) (preview all)

Passing data to this flexible section

Flexible sections are not called in the way shown below, however this information serves as a reference for the data required by this flexible section.

<%= render "flexible_page/flexible_sections/breadcrumbs", {
  breadcrumbs: [
    {
      title: "Home",
      url: "/"
    },
    {
      title: "Example",
      url: "/example/"
    },
    {
      title: "Breadcrumb",
      url: "/breadcrumb/"
    }
  ]
} %>

Accessibility acceptance criteria

Links 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

With custom margin bottom (preview)

<%= render "flexible_page/flexible_sections/breadcrumbs", {
  margin_bottom: 0,
  breadcrumbs: [
    {
      title: "Home",
      url: "/"
    },
    {
      title: "Example",
      url: "/example/"
    },
    {
      title: "Breadcrumb",
      url: "/breadcrumb/"
    }
  ]
} %>

Full width (preview)

The full width option by itself doesn’t really change much, as the breadcrumbs are still limited to a govuk-width-container. This option is meant to be used with the background option, below.

<%= render "flexible_page/flexible_sections/breadcrumbs", {
  full_width: true,
  breadcrumbs: [
    {
      title: "Home",
      url: "/"
    },
    {
      title: "Example",
      url: "/example/"
    },
    {
      title: "Breadcrumb",
      url: "/breadcrumb/"
    }
  ]
} %>

With dark background (preview)

<%= render "flexible_page/flexible_sections/breadcrumbs", {
  background: "dark",
  full_width: true,
  breadcrumbs: [
    {
      title: "Home",
      url: "/"
    },
    {
      title: "Example",
      url: "/example/"
    },
    {
      title: "Breadcrumb",
      url: "/breadcrumb/"
    }
  ]
} %>