1. Collections Component Guide
  2. Contextual breadcrumbs
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:

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