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
} %>

Adds GA4 tracking to the step by step nav header component when it is rendered as a breadcrumb. See the ga4-link-tracker documentation for more information. Note: tracking on regular breadcrumbs is enabled by default and does not require activating.

<%= render "govuk_publishing_components/components/contextual_breadcrumbs", {
  ga4_tracking: true,
  content_item: {
    title: "A content item",
    links: {
      part_of_step_navs: [
        {
          title: "Learn to drive a car: step by step",
          base_path: "/micropigs-vs-micropugs"
        }
      ]
    }
  }
} %>