Tailwind CSS Breadcrumbs

Use responsive breadcrumbs component with helper examples for breadcrumbs menu, breadcrumbs navigation bar & more. Free download, open-source license.

Basic example

Breadcrumb components are an important component in any website or application that can be used to indicate the current position of a page in a hierarchical page structure.

Use the following breadcrumb example to show the hierarchical structure of pages.

HTML

        
            
      <!--First breadcrumb-->
      <nav class="w-full rounded-md">
        <ol class="list-reset flex">
          <li class="text-neutral-400">Home</li>
        </ol>
      </nav>

      <!--Second breadcrumb-->
      <nav class="w-full rounded-md">
        <ol class="list-reset flex">
          <li>
            <a
              href="#"
              class="text-primary transition duration-150 ease-in-out hover:text-primary-accent-300 focus:text-primary-accent-300 active:text-primary-accent-300 motion-reduce:transition-none dark:text-primary-400"
              >Home</a
            >
          </li>
          <li>
            <span class="mx-2 text-neutral-400">/</span>
          </li>
          <li class="text-neutral-400">Library</li>
        </ol>
      </nav>

      <!--Third breadcrumb-->
      <nav class="w-full rounded-md">
        <ol class="list-reset flex">
          <li>
            <a
              href="#"
              class="text-primary transition duration-150 ease-in-out hover:text-primary-accent-300 focus:text-primary-accent-300 active:text-primary-accent-300 motion-reduce:transition-none dark:text-primary-400"
              >Home</a
            >
          </li>
          <li>
            <span class="mx-2 text-neutral-400">/</span>
          </li>
          <li>
            <a
              href="#"
              class="text-primary transition duration-150 ease-in-out hover:text-primary-accent-300 focus:text-primary-accent-300 active:text-primary-accent-300 motion-reduce:transition-none dark:text-primary-400"
              >Library</a
            >
          </li>
          <li>
            <span class="mx-2 text-neutral-400">/</span>
          </li>
          <li class="text-neutral-400">Data</li>
        </ol>
      </nav>

Hey there 👋 we're excited about TW elements and want to see it grow! If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

You can use breadcrumb together with navbar.

HTML

        
            
      <nav
        class="relative flex w-full flex-wrap items-center justify-between bg-zinc-50 py-2 shadow-dark-mild dark:bg-neutral-700 lg:py-4">
        <div class="flex w-full flex-wrap items-center justify-between px-3">
          <nav class="w-full rounded-md" aria-label="breadcrumb">
            <ol class="list-reset ms-2 flex">
              <li>
                <a
                  href="#"
                  class="motion-reduce:transition-none-none text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80"
                  >Home</a
                >
              </li>
              <li>
                <span class="mx-2 text-black/60 dark:text-white/60">/</span>
              </li>
              <li>
                <a
                  href="#"
                  class="motion-reduce:transition-none-none text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80"
                  >Library</a
                >
              </li>
              <li>
                <span class="mx-2 text-black/60 dark:text-white/60">/</span>
              </li>
              <li>
                <a
                  href="#"
                  class="motion-reduce:transition-none-none text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80"
                  >Data</a
                >
              </li>
            </ol>
          </nav>
        </div>
      </nav>

Changing the separator

Use the following example to change the separator dividing each breadcrumb.

HTML

        
            
      <nav class="bg-grey-light w-full rounded-md">
        <ol class="list-reset flex">
          <li>
            <a
              href="#"
              class="text-primary transition duration-150 ease-in-out hover:text-primary-accent-300 focus:text-primary-accent-300 active:text-primary-accent-300 motion-reduce:transition-none dark:text-primary-400"
              >Home</a
            >
          </li>
          <li>
            <span class="mx-2 text-neutral-400">></span>
          </li>
          <li>
            <a
              href="#"
              class="text-primary transition duration-150 ease-in-out hover:text-primary-accent-300 focus:text-primary-accent-300 active:text-primary-accent-300 motion-reduce:transition-none dark:text-primary-400"
              >Library</a
            >
          </li>
          <li>
            <span class="mx-2 text-neutral-400">></span>
          </li>
          <li class="text-neutral-400">Data</li>
        </ol>
      </nav>

Without separators

Use the following example to remove breadcrumbs separators.

HTML

        
            
      <nav class="bg-grey-light w-full rounded-md">
        <ol class="list-reset flex">
          <li>
            <a
              href="#"
              class="me-2 text-primary transition duration-150 ease-in-out hover:text-primary-accent-300 focus:text-primary-accent-300 active:text-primary-accent-300 motion-reduce:transition-none dark:text-primary-400"
              >Home</a
            >
          </li>
          <li>
            <a
              href="#"
              class="me-2 text-primary transition duration-150 ease-in-out hover:text-primary-accent-300 focus:text-primary-accent-300 active:text-primary-accent-300 motion-reduce:transition-none dark:text-primary-400"
              >Library</a
            >
          </li>
          <li class="text-neutral-400">Data</li>
        </ol>
      </nav>

With background

Use of a solid background can make the breadcrumbs section stand out, making it easy for the user to navigate the page.

HTML

        
            
      <nav class="w-full rounded-md bg-zinc-50 px-5 py-3 dark:bg-neutral-700">
        <ol class="list-reset flex">
          <li>
            <a
              href="#"
              class="text-primary transition duration-150 ease-in-out hover:text-primary-accent-300 focus:text-primary-accent-300 active:text-primary-accent-300 motion-reduce:transition-none dark:text-primary-400"
              >Home</a
            >
          </li>
          <li>
            <span class="mx-2 text-neutral-400">/</span>
          </li>
          <li>
            <a
              href="#"
              class="text-primary transition duration-150 ease-in-out hover:text-primary-accent-300 focus:text-primary-accent-300 active:text-primary-accent-300 motion-reduce:transition-none dark:text-primary-400"
              >Library</a
            >
          </li>
          <li>
            <span class="mx-2 text-neutral-400">/</span>
          </li>
          <li class="text-neutral-400">Data</li>
        </ol>
      </nav>

Breadcrumbs

Basic example

Breadcrumb in navbar

Changing the separator

Without separators

With background

Access restricted

To view this section you must have an active PRO account

Breadcrumbs

Tailwind CSS Breadcrumbs

Basic example

Breadcrumb in navbar

Changing the separator

Without separators

With background

Related resources

Tutorials:

Extended Docs:

Generators and builders:

Design System (Figma):