1. Static Component Guide
  2. Breadcrumbs

Component

Breadcrumbs

Navigational breadcrumbs, showing page hierarchy

Accepts an array of breadcrumb objects. Each crumb must have a title and a URL.

How to call this component

<%= render "govuk_component/breadcrumbs" {
  breadcrumbs: [
    {
      title: "Section",
      url: "/section"
    },
    {
      title: "Sub-section",
      url: "/section/sub-section"
    }
  ]
} %>

How it looks

Other examples (preview all)

No breadcrumbs (preview)

<%= render "govuk_component/breadcrumbs" {
  breadcrumbs: [

  ]
} %>

Single section (preview)

<%= render "govuk_component/breadcrumbs" {
  breadcrumbs: [
    {
      title: "Section",
      url: "/section"
    }
  ]
} %>

Many breadcrumbs (preview)

<%= render "govuk_component/breadcrumbs" {
  breadcrumbs: [
    {
      title: "Home",
      url: "/"
    },
    {
      title: "Section",
      url: "/section"
    },
    {
      title: "Sub-section",
      url: "/section/sub-section"
    },
    {
      title: "Sub Sub-section",
      url: "/section/sub-section/sub-sub-section"
    }
  ]
} %>

No home (preview)

<%= render "govuk_component/breadcrumbs" {
  breadcrumbs: [
    {
      title: "Service Manual",
      url: "/service-manual"
    },
    {
      title: "Agile Delivery",
      url: "/service-manual/agile-delivery"
    }
  ]
} %>

Real (preview)

<%= render "govuk_component/breadcrumbs" {
  breadcrumbs: [
    {
      title: "Home",
      url: "/"
    },
    {
      title: "Passports, travel and living abroad",
      url: "/browse/abroad"
    },
    {
      title: "Travel abroad",
      url: "/browse/abroad/travel-abroad"
    }
  ]
} %>

Last breadcrumb is current page (preview)

<%= render "govuk_component/breadcrumbs" {
  breadcrumbs: [
    {
      title: "Home",
      url: "/"
    },
    {
      title: "Passports, travel and living abroad",
      url: "/browse/abroad"
    },
    {
      title: "Travel abroad"
    }
  ]
} %>