Breadcrumbs

Standard

Example

Show code

<nav aria-label="Breadcrumb" class="govuk-breadcrumbs">
  <ol class="govuk-breadcrumbs__list">
    <li class="govuk-breadcrumbs__list-item">
      <a href="#" class="govuk-breadcrumbs__link">Home</a>
    </li>
    <li class="govuk-breadcrumbs__list-item">
      <a href="#" class="govuk-breadcrumbs__link">Section</a>
    </li>
    <li class="govuk-breadcrumbs__list-item">
      <a href="#" class="govuk-breadcrumbs__link">Sub-section</a>
    </li>
    <li class="govuk-breadcrumbs__list-item">
      <a href="#" class="govuk-breadcrumbs__link">Sub Sub-section</a>
    </li>
  </ol>
</nav>

---
import { Breadcrumbs, BreadcrumbItem } from "@i-dot-ai-npm/component-library-astro";
---

<Breadcrumbs>
  <BreadcrumbItem href="#">Home</BreadcrumbItem>
  <BreadcrumbItem href="#">Section</BreadcrumbItem>
  <BreadcrumbItem href="#">Sub-section</BreadcrumbItem>
  <BreadcrumbItem href="#">Sub Sub-section</BreadcrumbItem>
</Breadcrumbs>

import { Breadcrumbs, BreadcrumbItem } from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <Breadcrumbs>
      <BreadcrumbItem href="#">Home</BreadcrumbItem>
      <BreadcrumbItem href="#">Section</BreadcrumbItem>
      <BreadcrumbItem href="#">Sub-section</BreadcrumbItem>
      <BreadcrumbItem href="#">Sub Sub-section</BreadcrumbItem>
    </Breadcrumbs>
  );
}

<script>
  import { Breadcrumbs, BreadcrumbItem } from "@i-dot-ai-npm/component-library-svelte";
</script>

<Breadcrumbs>
  <BreadcrumbItem href="#">Home</BreadcrumbItem>
  <BreadcrumbItem href="#">Section</BreadcrumbItem>
  <BreadcrumbItem href="#">Sub-section</BreadcrumbItem>
  <BreadcrumbItem href="#">Sub Sub-section</BreadcrumbItem>
</Breadcrumbs>

import { Breadcrumbs, BreadcrumbItem } from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <Breadcrumbs>
      <BreadcrumbItem href="#">Home</BreadcrumbItem>
      <BreadcrumbItem href="#">Section</BreadcrumbItem>
      <BreadcrumbItem href="#">Sub-section</BreadcrumbItem>
      <BreadcrumbItem href="#">Sub Sub-section</BreadcrumbItem>
    </Breadcrumbs>
  );
}

Inverse

Use the inverse breadcrumbs on dark backgrounds.

Show code

<nav aria-label="Breadcrumb" class="govuk-breadcrumbs govuk-breadcrumbs--inverse">
  <ol class="govuk-breadcrumbs__list">
    <li class="govuk-breadcrumbs__list-item">
      <a href="#" class="govuk-breadcrumbs__link">Home</a>
    </li>
    <li class="govuk-breadcrumbs__list-item">
      <a href="#" class="govuk-breadcrumbs__link">Section</a>
    </li>
    <li class="govuk-breadcrumbs__list-item">
      <a href="#" class="govuk-breadcrumbs__link">Sub-section</a>
    </li>
    <li class="govuk-breadcrumbs__list-item">
      <a href="#" class="govuk-breadcrumbs__link">Sub Sub-section</a>
    </li>
  </ol>
</nav>

---
import { Breadcrumbs, BreadcrumbItem } from "@i-dot-ai-npm/component-library-astro";
---

<Breadcrumbs inverse>
  <BreadcrumbItem href="#">Home</BreadcrumbItem>
  <BreadcrumbItem href="#">Section</BreadcrumbItem>
  <BreadcrumbItem href="#">Sub-section</BreadcrumbItem>
  <BreadcrumbItem href="#">Sub Sub-section</BreadcrumbItem>
</Breadcrumbs>

import { Breadcrumbs, BreadcrumbItem } from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <Breadcrumbs inverse>
      <BreadcrumbItem href="#">Home</BreadcrumbItem>
      <BreadcrumbItem href="#">Section</BreadcrumbItem>
      <BreadcrumbItem href="#">Sub-section</BreadcrumbItem>
      <BreadcrumbItem href="#">Sub Sub-section</BreadcrumbItem>
    </Breadcrumbs>
  );
}

<script>
  import { Breadcrumbs, BreadcrumbItem } from "@i-dot-ai-npm/component-library-svelte";
</script>

<Breadcrumbs inverse>
  <BreadcrumbItem href="#">Home</BreadcrumbItem>
  <BreadcrumbItem href="#">Section</BreadcrumbItem>
  <BreadcrumbItem href="#">Sub-section</BreadcrumbItem>
  <BreadcrumbItem href="#">Sub Sub-section</BreadcrumbItem>
</Breadcrumbs>

import { Breadcrumbs, BreadcrumbItem } from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <Breadcrumbs inverse>
      <BreadcrumbItem href="#">Home</BreadcrumbItem>
      <BreadcrumbItem href="#">Section</BreadcrumbItem>
      <BreadcrumbItem href="#">Sub-section</BreadcrumbItem>
      <BreadcrumbItem href="#">Sub Sub-section</BreadcrumbItem>
    </Breadcrumbs>
  );
}

When to use this component

Use the breadcrumbs component when you need to help users understand and move between the multiple levels of a website.

When not to use this component

Do not use the breadcrumbs component on websites with a flat structure, or to show progress through a linear journey or transaction.

If you’re using other navigational elements on the page, such as a sidebar, consider whether your users need the additional support of breadcrumbs.