# Breadcrumbs A trail of links showing where the current page sits in the site hierarchy. ## Preview ```html title="Breadcrumbs" ``` ```tsx import { Breadcrumbs } from '@govtech-bb/react'; ; ``` The Breadcrumbs component shows the pages above the current one in the site hierarchy, starting from the homepage. It does not include the current page: users can see that from the page title. The chevron separators are drawn with CSS, so nothing extra is announced to screen readers. ## Usage
  • Use breadcrumbs when a page sits several levels deep in a website hierarchy.
  • Use them when users may arrive on an interior page from search or an external link and need orientation.
  • Do not use breadcrumbs to show progress through a linear service; use the back button.
  • Do not add them to a flat website or when the same path is already clear from nearby navigation.
## Best practices ### Reflect the website structure Start with the homepage and end with the parent of the current page. Use short, recognisable labels that match the destination headings. ### Use semantic navigation Wrap the ordered list in a `nav` labelled “Breadcrumb”. Keep separators out of the accessible name and mark the current page when it appears in the trail. ## Collapsing on mobile If a deep trail risks crowding a small screen, use the `govbb-breadcrumbs--collapse-on-mobile` modifier. On mobile it shows only the first and last items in the trail; on larger screens the full trail returns. ```html title="Collapsed on mobile" ``` ```tsx import { Breadcrumbs } from '@govtech-bb/react'; ; ```