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 partial: 'govuk_component/breadcrumbs', locals: { breadcrumbs: [ { title: "Section", url: "/section" }, { title: "Sub-section", url: "/section/sub-section" } ] } %>

How this component looks

Other examples (preview all)

No breadcrumbs (preview)

<%= render partial: 'govuk_component/breadcrumbs', locals: { breadcrumbs: [ ] } %>

Single section (preview)

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

Many breadcrumbs (preview)

<%= render partial: 'govuk_component/breadcrumbs', locals: { 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 partial: 'govuk_component/breadcrumbs', locals: { breadcrumbs: [ { title: "Service Manual", url: "/service-manual" }, { title: "Agile Delivery", url: "/service-manual/agile-delivery" } ] } %>

Real (preview)

<%= render partial: 'govuk_component/breadcrumbs', locals: { 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 partial: 'govuk_component/breadcrumbs', locals: { breadcrumbs: [ { title: "Home", url: "/" }, { title: "Passports, travel and living abroad", url: "/browse/abroad" }, { title: "Travel abroad" } ] } %>