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 4 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
Organisation breadcrumb, which uses the organisations 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

Standard options

This component uses the component wrapper helper. It accepts the following options and applies them to the parent element of the component. See the component wrapper helper documentation for more detail.

id - accepts a string for the element ID attribute
data_attributes - accepts a hash of data attributes
aria - accepts a hash of aria attributes
classes - accepts a space separated string of classes, these should not be used for styling and must be prefixed with js-
margin_bottom - accepts a number from 0 to 9 (0px to 60px) using the GOV.UK Frontend spacing scale
role - accepts a space separated string of roles
lang - accepts a language attribute value
open - accepts an open attribute value (true or false)
hidden - accepts an empty string, ‘hidden’, or ‘until-found’
tabindex - accepts an integer. The integer can also be passed as a string
dir - accepts ‘rtl’, ‘ltr’, or ‘auto’
type - accepts any valid type attribute e.g. ‘button’, ‘submit’, ‘text’
rel - accepts any valid rel attribute e.g. ‘nofollow’
target - accepts a valid target attribute e.g. ‘_blank’
title - accepts any string
draggable - accepts a draggable attribute value (“true” or “false”)

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