name: "Breadcrumbs"
description: "Navigational breadcrumbs, showing page hierarchy"
body: |
  Accepts an array of breadcrumb objects. Each crumb must have a title and a URL.
  Links are tracked, but in Universal Analytics, links to the homepage (any link with a url of `/`) will be tracked separately as `homeLinkClicked`.

  We recommend that if using the breadcrumbs for navigation purposes, you set `collapse_on_mobile` to `true` to make things more readable for mobile users. However, you can specify `collapse_on_mobile:``false` or remove the flag completely to stop this behaviour.
shared_accessibility_criteria:
  - link
accessibility_criteria:
  The breadcrumb links must have a text contrast ratio higher than 4.5:1 against the background colour to meet WCAG AA
  (this especially applies when [using the inverse flag](/component-guide/breadcrumbs/inverse)).
accessibility_excluded_rules:
  - skip-link # This component is creating a reference to #content which is part of the layout
display_html: true
uses_component_wrapper_helper: true
examples:
  default:
    data:
      collapse_on_mobile: true
      breadcrumbs:
      - title: 'Section'
        url: '/section'
      - title: 'Sub-section'
        url: '/section/sub-section'
  inverse:
    description: On a dark background, such as the header of topic pages
    data:
      collapse_on_mobile: true
      breadcrumbs:
      - title: 'Section'
        url: '/section'
      - title: 'Sub-section'
        url: '/section/sub-section'
        title: 'Education of disadvantaged children'
      inverse: true
    context:
      dark_background: true
  no_breadcrumbs:
    data:
      collapse_on_mobile: true
      breadcrumbs: []
  single_section:
    data:
      collapse_on_mobile: true
      breadcrumbs:
      - title: 'Section'
        url: '/section'
  many_breadcrumbs:
    data:
      collapse_on_mobile: true
      breadcrumbs:
      - title: 'Home'
        url: '/'
      - title: 'Section'
        url: '/section'
      - title: 'Sub-section'
        url: '/section/sub-section'
      - title: 'Sub Sub-section'
        url: '/section/sub-section/sub-sub-section'
  no_home:
    data:
      collapse_on_mobile: true
      breadcrumbs:
      - title: 'Service Manual'
        url: '/service-manual'
      - title: 'Agile Delivery'
        url: '/service-manual/agile-delivery'
  real:
    data:
      collapse_on_mobile: true
      breadcrumbs:
      - title: 'Home'
        url: '/'
      - title: 'Passports, travel and living abroad'
        url: '/browse/abroad'
      - title: 'Travel abroad'
        url: '/browse/abroad/travel-abroad'
  long_taxon:
    description: This is an example of a breadcrumb with long taxons to demonstrate the wrapping behaviour and touch target area on mobile
    data:
      collapse_on_mobile: true
      breadcrumbs:
      - title: 'Home'
        url: '/'
      - title: 'Education, training and skills'
        url: '/education'
      - title: 'Education of disadvantaged children appended with some extra long content to make this a very very very very long taxon'
        url: '/education'
  stop_collapsing_on_mobile:
    description: We recommend that if using the breadcrumbs for navigation purposes, you set `collapse_on_mobile` to `true` to make things more readable for mobile users. However, you can specify `collapse_on_mobile:``false` or remove the flag completely to stop this behaviour.
    data:
      collapse_on_mobile: false
      breadcrumbs:
      - title: 'Home'
        url: '/'
      - title: 'Passports, travel and living abroad'
        url: '/browse/abroad'
      - title: 'Travel abroad'
        url: '/browse/abroad/travel-abroad'
  with_border:
    description: "Set a border below the breadcrumb. Off by default."
    data:
      border: "bottom"
      breadcrumbs:
      - title: "Section"
        url: "/section"
      - title: "Sub-section"
        url: "/section/sub-section"
      - title: "Sub-sub-section"
        url: "/section/sub-section/sub-section"
  with_border_and_collapse_on_mobile:
    data:
      border: "bottom"
      collapse_on_mobile: true
      breadcrumbs:
      - title: "Section"
        url: "/section"
      - title: "Sub-section"
        url: "/section/sub-section"
      - title: "Sub-sub-section"
        url: "/section/sub-section/sub-section"