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

With ga4 tracking (preview)

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