Breadcrumbs

Breadcrumbs are a navigational element that helps users understand where they are in a website hierarchy. They are typically used as an added accessory rather than a primary navigational element. Breadcrumbs are often used in combination with other navigational elements to provide a more comprehensive navigation experience.

Design Hints

Breadcrumbs are low-friction navigational elements to give the user a sense of where they are in the website hierarchy. The breadcrumbs are generally placed at the top of the page. It's a powerful user experience feature when used correctly and in combination with other navigational elements.

Accessiblity Hints

For best user experience, the nav element should be used for the breadcrumbs with aria-label attribute set to Breadcrumb. The current page link should be at the end of the breadcrumbs with the attribute aria-current set to page.

Note: The components below have the tailwind selector visited set to the same color as the link color for the sake of display. In most cases you would want to use an alternate color for the visited selector.

Simple Breadcrumbs

Simple breadcrumbs are a basic version of breadcrumbs that only show the current page and the parent pages with links and a separator between them.

<nav
  class="flex max-w-max text-base text-zinc-950 dark:text-zinc-100"
  aria-label="Breadcrumb"
>
  <ol class="flex flex-wrap items-center justify-center text-sm md:text-base">
    <li>
      <a
        href="#"
        class="text-blue-700 underline underline-offset-4 visited:text-blue-700 hover:text-blue-500 dark:text-blue-400 dark:visited:text-blue-400 dark:hover:text-blue-600"
        >Home</a
      ><span class="mx-3" aria-hidden="true">&#47;</span>
    </li>
    <li>
      <a
        href="#"
        class="text-blue-700 underline underline-offset-4 visited:text-blue-700 hover:text-blue-500 dark:text-blue-400 dark:visited:text-blue-400 dark:hover:text-blue-600"
        >About</a
      ><span class="mx-3" aria-hidden="true">&#47;</span>
    </li>
    <li>
      <a
        href="#"
        aria-current="page"
        class="font-semibold text-zinc-950 hover:text-blue-500 dark:text-zinc-50 dark:hover:text-blue-500"
        >Blog</a
      >
    </li>
  </ol>
</nav>

<nav
  class="flex max-w-max text-base text-zinc-950 dark:text-zinc-100"
  aria-label="Breadcrumb"
>
  <ol class="flex flex-wrap items-center justify-center text-sm md:text-base">
    <li>
      <a
        href="#"
        class="text-blue-700 underline underline-offset-4 visited:text-blue-700 hover:text-blue-500 dark:text-blue-400 dark:visited:text-blue-400 dark:hover:text-blue-600"
        >Home</a
      ><span class="mx-3" aria-hidden="true">&#47;</span>
    </li>
    <li>
      <a
        href="#"
        class="text-blue-700 underline underline-offset-4 visited:text-blue-700 hover:text-blue-500 dark:text-blue-400 dark:visited:text-blue-400 dark:hover:text-blue-600"
        >About</a
      ><span class="mx-3" aria-hidden="true">&#47;</span>
    </li>
    <li>
      <a
        href="#"
        aria-current="page"
        class="font-semibold text-zinc-950 hover:text-blue-500 dark:text-zinc-50 dark:hover:text-blue-500"
        >Blog</a
      >
    </li>
  </ol>
</nav>

Alternate Simple Breadcrumbs

An alternate style for simple breadcrumbs

<nav
  class="flex max-w-max text-base text-zinc-950 dark:text-zinc-100"
  aria-label="Breadcrumb"
>
  <ol class="flex flex-wrap items-center justify-center text-sm md:text-base">
    <li>
      <a
        href="#"
        class="text-blue-700 underline underline-offset-4 visited:text-blue-700 hover:text-blue-500 dark:text-blue-400 dark:visited:text-blue-400 dark:hover:text-blue-600"
        >Home</a
      ><span class="mx-3" aria-hidden="true">&gt;</span>
    </li>

    <li>
      <a
        href="#"
        class="text-blue-700 underline underline-offset-4 visited:text-blue-700 hover:text-blue-500 dark:text-blue-400 dark:visited:text-blue-400 dark:hover:text-blue-600"
        >About</a
      ><span class="mx-3" aria-hidden="true">&gt;</span>
    </li>
    <li>
      <a
        href="#"
        aria-current="page"
        class="font-semibold text-zinc-950 hover:text-blue-500 dark:text-zinc-50 dark:hover:text-blue-500"
        >Blog</a
      >
    </li>
  </ol>
</nav>

<nav
  class="flex max-w-max text-base text-zinc-950 dark:text-zinc-100"
  aria-label="Breadcrumb"
>
  <ol class="flex flex-wrap items-center justify-center text-sm md:text-base">
    <li>
      <a
        href="#"
        class="text-blue-700 underline underline-offset-4 visited:text-blue-700 hover:text-blue-500 dark:text-blue-400 dark:visited:text-blue-400 dark:hover:text-blue-600"
        >Home</a
      ><span class="mx-3" aria-hidden="true">&gt;</span>
    </li>

    <li>
      <a
        href="#"
        class="text-blue-700 underline underline-offset-4 visited:text-blue-700 hover:text-blue-500 dark:text-blue-400 dark:visited:text-blue-400 dark:hover:text-blue-600"
        >About</a
      ><span class="mx-3" aria-hidden="true">&gt;</span>
    </li>
    <li>
      <a
        href="#"
        aria-current="page"
        class="font-semibold text-zinc-950 hover:text-blue-500 dark:text-zinc-50 dark:hover:text-blue-500"
        >Blog</a
      >
    </li>
  </ol>
</nav>

Styled Breadcrumbs

Breadcrumbs with a visible container.

<div class="flex flex-col">
  <nav
    class="my-4 flex max-w-max rounded-lg border border-gray-400 bg-gray-50 px-5 py-3 text-base dark:border-zinc-700 dark:bg-zinc-950"
    aria-label="Breadcrumb"
  >
    <ol class="flex flex-wrap items-center justify-center text-sm md:text-base">
      <li>
        <a
          href="#"
          class="text-blue-700 underline underline-offset-4 visited:text-blue-700 hover:text-blue-500 dark:text-blue-400 dark:visited:text-blue-400 dark:hover:text-blue-600"
          >Home</a
        ><span class="mx-3" aria-hidden="true">&#47;</span>
      </li>
      <li>
        <a
          href="#"
          class="text-blue-700 underline underline-offset-4 visited:text-blue-700 hover:text-blue-500 dark:text-blue-400 dark:visited:text-blue-400 dark:hover:text-blue-600"
          >About</a
        ><span class="mx-3" aria-hidden="true">&#47;</span>
      </li>
      <li>
        <a
          href="#"
          aria-current="page"
          class="font-semibold text-zinc-950 hover:text-blue-500 dark:text-zinc-50 dark:hover:text-blue-500"
          >Blog</a
        >
      </li>
    </ol>
  </nav>
  <nav
    class="my-4 flex max-w-max rounded-full border border-gray-400 bg-gray-50 px-5 py-3 text-base dark:border-zinc-700 dark:bg-zinc-950"
    aria-label="Breadcrumb"
  >
    <ol class="flex flex-wrap items-center justify-center text-sm md:text-base">
      <li>
        <a
          href="#"
          class="text-blue-700 underline underline-offset-4 visited:text-blue-700 hover:text-blue-500 dark:text-blue-400 dark:visited:text-blue-400 dark:hover:text-blue-600"
          >Home</a
        ><span class="mx-3" aria-hidden="true">&gt;</span>
      </li>

      <li>
        <a
          href="#"
          class="text-blue-700 underline underline-offset-4 visited:text-blue-700 hover:text-blue-500 dark:text-blue-400 dark:visited:text-blue-400 dark:hover:text-blue-600"
          >About</a
        ><span class="mx-3" aria-hidden="true">&gt;</span>
      </li>
      <li>
        <a
          href="#"
          aria-current="page"
          class="font-semibold text-zinc-950 hover:text-blue-500 dark:text-zinc-50 dark:hover:text-blue-500"
          >Blog</a
        >
      </li>
    </ol>
  </nav>
</div>

<div class="flex flex-col">
  <nav
    class="my-4 flex max-w-max rounded-lg border border-gray-400 bg-gray-50 px-5 py-3 text-base dark:border-zinc-700 dark:bg-zinc-950"
    aria-label="Breadcrumb"
  >
    <ol class="flex flex-wrap items-center justify-center text-sm md:text-base">
      <li>
        <a
          href="#"
          class="text-blue-700 underline underline-offset-4 visited:text-blue-700 hover:text-blue-500 dark:text-blue-400 dark:visited:text-blue-400 dark:hover:text-blue-600"
          >Home</a
        ><span class="mx-3" aria-hidden="true">&#47;</span>
      </li>
      <li>
        <a
          href="#"
          class="text-blue-700 underline underline-offset-4 visited:text-blue-700 hover:text-blue-500 dark:text-blue-400 dark:visited:text-blue-400 dark:hover:text-blue-600"
          >About</a
        ><span class="mx-3" aria-hidden="true">&#47;</span>
      </li>
      <li>
        <a
          href="#"
          aria-current="page"
          class="font-semibold text-zinc-950 hover:text-blue-500 dark:text-zinc-50 dark:hover:text-blue-500"
          >Blog</a
        >
      </li>
    </ol>
  </nav>
  <nav
    class="my-4 flex max-w-max rounded-full border border-gray-400 bg-gray-50 px-5 py-3 text-base dark:border-zinc-700 dark:bg-zinc-950"
    aria-label="Breadcrumb"
  >
    <ol class="flex flex-wrap items-center justify-center text-sm md:text-base">
      <li>
        <a
          href="#"
          class="text-blue-700 underline underline-offset-4 visited:text-blue-700 hover:text-blue-500 dark:text-blue-400 dark:visited:text-blue-400 dark:hover:text-blue-600"
          >Home</a
        ><span class="mx-3" aria-hidden="true">&gt;</span>
      </li>

      <li>
        <a
          href="#"
          class="text-blue-700 underline underline-offset-4 visited:text-blue-700 hover:text-blue-500 dark:text-blue-400 dark:visited:text-blue-400 dark:hover:text-blue-600"
          >About</a
        ><span class="mx-3" aria-hidden="true">&gt;</span>
      </li>
      <li>
        <a
          href="#"
          aria-current="page"
          class="font-semibold text-zinc-950 hover:text-blue-500 dark:text-zinc-50 dark:hover:text-blue-500"
          >Blog</a
        >
      </li>
    </ol>
  </nav>
</div>

Accessibility Testing Status

Component	NVDA	Windows Narrator	WAVE	Axe	IBM Equal Access
Simple Breadcrumbs	Yes	Yes	Yes	Yes	Yes
Alternate Simple Breadcrumbs	Yes	Yes	Yes	Yes	Yes
Styled Breadcrumbs	Yes	Yes	Yes	Yes	Yes

The components above follow WAI-ARIA APG specifications for Breadcrumb pattern .