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)

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.

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

Without ga4 tracking (preview)

Disables GA4 tracking. Tracking is enabled by default. This includes GA4 tracking on the step by step nav header component when it is rendered as a breadcrumb. See the ga4-link-tracker documentation for more information.

<%= render "govuk_publishing_components/components/contextual_breadcrumbs", {
  disable_ga4: 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"
        }
      ]
    }
  }
} %>