Component

Contextual breadcrumbs

Breadcrumbs that shows different things depending on the page

This is a complex component that calls other components. For more accurate preview with real data, see the contextual navigation preview.

There are 3 main variants of the component:

Step by step, which uses the step by step header
Parent breadcrumb, which uses the parent link of the page with the breadcrumbs component
Taxon breadcrumb, which uses the taxons link of the page with the breadcrumbs component

It must always used together with the contextual sidebar and footer.

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

Home

How to call this component

<%= render "govuk_publishing_components/components/contextual_breadcrumbs", {
  content_item: {
    title: "A content item"
  }
} %>

Accessibility acceptance criteria

Components called by this component must be accessible

Other examples

Inverse (preview)

Passes the ‘inverse’ option to the breadcrumbs, if shown.

Home

<%= render "govuk_publishing_components/components/contextual_breadcrumbs", {
  content_item: {
    title: "Another content item"
  },
  inverse: true
} %>