Tailwind Breadcrumbs Components (70)

Breadcrumbs from Nightsable

Dark Breadcrumb Navigation Bar with Homepage and Services

A thin dark horizontal strip showing a breadcrumb trail with 'Homepage' and 'Services' separated by a slash. It functions as secondary navigation indicating the current page location within a site hierarchy.

<section class="overflow-hidden">
  <div class="flex items-center gap-4 p-2">
    <a class="text-white font-normal" href="#">Homepage</a>
    <span class="text-white font-normal">/</span>
    <a class="text-white font-normal text-opacity-60" href="#">Services</a>
  </div>
</section>

Breadcrumbs from Shopal

Tailwind CSS

Shopal

Dark Breadcrumb Navigation Bar with Lime Logo

A horizontal breadcrumb trail on a dark charcoal bar showing Homepage, Catalogue, and Product with chevron separators and a lime-green logo icon at the left. The current page 'Product' is highlighted in lime green, indicating location within the site hierarchy.

<section>
  <div class="bg-gray-900">
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap xs:h-16 py-4 items-center">
        <div class="w-full xs:w-auto mb-2 xs:mb-0 xs:mr-2">
          <div class="flex h-6 w-6 items-center justify-center bg-green-500 border-2 border-black rounded-md shadow-sm">
            <svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10.02 2.40997L7.14 0.394969C6.355 -0.155031 5.15 -0.125031 4.395 0.459969L1.89 2.41497C1.39 2.80497 0.994995 3.60497 0.994995 4.23497V7.68497C0.994995 8.95997 2.03 9.99997 3.305 9.99997H8.69499C9.96999 9.99997 11.005 8.96497 11.005 7.68997V4.29997C11.005 3.62497 10.57 2.79497 10.02 2.40997ZM6.375 7.99997C6.375 8.20497 6.205 8.37497 6 8.37497C5.795 8.37497 5.625 8.20497 5.625 7.99997V6.49997C5.625 6.29497 5.795 6.12497 6 6.12497C6.205 6.12497 6.375 6.29497 6.375 6.49997V7.99997Z" fill="black"></path>
            </svg>
          </div>
        </div>
        <a class="inline-block text-sm text-white font-bold" href="#">Homepage</a>
        <span class="mx-3">
          <svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M0.453338 1.05338L0.453338 5.20671L0.453339 8.94671C0.453339 9.58671 1.22667 9.90671 1.68001 9.45338L5.13334 6.00005C5.68667 5.44671 5.68667 4.54671 5.13334 3.99338L3.82 2.68005L1.68001 0.540046C1.22667 0.093379 0.453338 0.41338 0.453338 1.05338Z" fill="white"></path>
          </svg>
        </span>
        <a class="inline-block text-sm text-white font-bold" href="#">Catalogue</a>
        <span class="mx-3">
          <svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M0.453338 1.05338L0.453338 5.20671L0.453339 8.94671C0.453339 9.58671 1.22667 9.90671 1.68001 9.45338L5.13334 6.00005C5.68667 5.44671 5.68667 4.54671 5.13334 3.99338L3.82 2.68005L1.68001 0.540046C1.22667 0.093379 0.453338 0.41338 0.453338 1.05338Z" fill="white"></path>
          </svg>
        </span>
        <a class="inline-block text-sm text-green-500 font-bold" href="#">Product</a>
      </div>
    </div>
  </div>
</section>

Breadcrumbs from Dashy

Tailwind CSS

Dashy

Breadcrumb Navigation with Home Icon

A horizontal breadcrumb trail showing a home icon followed by 'Reports' and 'Weekly Report' separated by slash dividers. It indicates the current page location within a hierarchy on a light background.

<section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <ul class="inline-flex flex-wrap items-center -m-2">
      <li class="p-2">
        <a class="group flex items-center text-xs text-neutral-500 hover:text-neutral-600" href="#">
          <svg class="mr-2.5" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M1.75 7L2.91667 5.83333M2.91667 5.83333L7 1.75L11.0833 5.83333M2.91667 5.83333V11.6667C2.91667 11.9888 3.17783 12.25 3.5 12.25H5.25M11.0833 5.83333L12.25 7M11.0833 5.83333V11.6667C11.0833 11.9888 10.8222 12.25 10.5 12.25H8.75M5.25 12.25C5.57217 12.25 5.83333 11.9888 5.83333 11.6667V9.33333C5.83333 9.01117 6.0945 8.75 6.41667 8.75H7.58333C7.9055 8.75 8.16667 9.01117 8.16667 9.33333V11.6667C8.16667 11.9888 8.42783 12.25 8.75 12.25M5.25 12.25H8.75" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          <span>/</span>
        </a>
      </li>
      <li class="p-2">
        <a class="group flex items-center text-xs text-neutral-500 hover:text-neutral-600" href="#">
          <span class="mr-4">Reports</span>
          <span>/</span>
        </a>
      </li>
      <li class="p-2">
        <a class="group flex items-center text-xs text-neutral-500 hover:text-neutral-600" href="#">
          <span>Weekly Report</span>
        </a>
      </li>
    </ul>
  </div>
</section>

Your next website starts here

Design with AI and generate multiple website concepts in minutes. Make it yours with Shuffle: tweak every detail in a visual editor.

Start with Multi-AI Designer

A landing page for a specialty coffee roastery|

Claude

GPT

Gemini

Describe your idea and compare designs from multiple AI models side by side. Try AI Design

Start with Visual Editor

Components Navigations Headers Features Pricing Footers

Header

Build from 13,400+ UI components and templates, then customize every detail. Try Visual Editor

EXPORT CODE TO THE TECH YOU LOVE

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

Breadcrumbs from Mirga

Tailwind CSS

Mirga

Breadcrumb navigation trail with Home, Products, Digital, and current page

A single-line breadcrumb trail showing the page hierarchy from Home through Products and Digital to the current page, Mirga Concept 2 with design app. The final item is greyed out to indicate the current location, with chevron separators between items.

<section class="py-5 px-10">
  <div class="flex items-center flex-wrap gap-4">
    <a class="inline-block text-sm font-medium tracking-tight" href="#">Home</a>
    <svg xmlns="http://www.w3.org/2000/svg" width="4" height="8" viewBox="0 0 4 8" fill="none">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M0.50225 0.5L0 0.98755L2.95244 4L0.0073503 7.0051L0.50225 7.5L4.00225 4L0.50225 0.5Z" fill="#19191B"></path>
    </svg>
    <a class="inline-block text-sm font-medium tracking-tight" href="#">Products</a>
    <svg xmlns="http://www.w3.org/2000/svg" width="4" height="8" viewBox="0 0 4 8" fill="none">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M0.50225 0.5L0 0.98755L2.95244 4L0.0073503 7.0051L0.50225 7.5L4.00225 4L0.50225 0.5Z" fill="#19191B"></path>
    </svg>
    <a class="inline-block text-sm font-medium tracking-tight" href="#">Digital</a>
    <svg xmlns="http://www.w3.org/2000/svg" width="4" height="8" viewBox="0 0 4 8" fill="none">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M0.50225 0.5L0 0.98755L2.95244 4L0.0073503 7.0051L0.50225 7.5L4.00225 4L0.50225 0.5Z" fill="#19191B"></path>
    </svg>
    <a class="inline-block text-sm font-medium tracking-tight text-neutral-300 hover:text-neutral-900 transition duration-200" href="#">Mirga Concept 2 with design app</a>
  </div>
</section>

Breadcrumbs from FilyTreck

Tailwind CSS

FilyTreck

Breadcrumb Navigation with Arrow Separators

A horizontal breadcrumb trail showing the page hierarchy Home, Use cases, and Consulting businesses, separated by right-arrow icons. The current page is emphasized in darker text while preceding levels appear in muted gray, on a plain white background.

<ul class="flex flex-wrap gap-3 py-3 px-4">
    <li class="flex flex-wrap items-center text-gray-500">
        <a href="#" class="mr-3 font-medium">Home</a>
        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="13" viewBox="0 0 12 13" fill="none">
            <path d="M6.51348 2.21443C6.4457 2.28417 6.39189 2.36715 6.35518 2.45857C6.31846 2.54999 6.29956 2.64804 6.29956 2.74708C6.29956 2.84612 6.31846 2.94418 6.35518 3.0356C6.39189 3.12702 6.4457 3.20999 6.51348 3.27973L8.89286 5.74793L1.66071 5.74793C1.46891 5.74793 1.28495 5.82697 1.14932 5.96766C1.0137 6.10835 0.9375 6.29917 0.9375 6.49814C0.9375 6.69711 1.0137 6.88793 1.14932 7.02862C1.28495 7.16931 1.46891 7.24835 1.66071 7.24835L8.89286 7.24835L6.51348 9.71654C6.4457 9.78629 6.39189 9.86926 6.35518 9.96068C6.31846 10.0521 6.29956 10.1502 6.29956 10.2492C6.29956 10.3482 6.31846 10.4463 6.35518 10.5377C6.39189 10.6291 6.4457 10.7121 6.51348 10.7818C6.64899 10.9216 6.83228 11 7.02335 11C7.21441 11 7.39771 10.9216 7.53321 10.7818L10.6358 7.55594C10.9074 7.27584 11.0609 6.89543 11.0625 6.49814C11.059 6.10345 10.9057 5.72609 10.6358 5.44784L7.53321 2.22193C7.39867 2.0812 7.2159 2.00142 7.02484 2.00002C6.83378 1.99861 6.64994 2.0757 6.51348 2.21443Z" fill="currentColor"></path>
        </svg>
    </li>
    <li class="flex flex-wrap items-center text-gray-500">
        <a href="#" class="mr-3 font-medium">Use cases</a>
        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="13" viewBox="0 0 12 13" fill="none">
            <path d="M6.51348 2.21443C6.4457 2.28417 6.39189 2.36715 6.35518 2.45857C6.31846 2.54999 6.29956 2.64804 6.29956 2.74708C6.29956 2.84612 6.31846 2.94418 6.35518 3.0356C6.39189 3.12702 6.4457 3.20999 6.51348 3.27973L8.89286 5.74793L1.66071 5.74793C1.46891 5.74793 1.28495 5.82697 1.14932 5.96766C1.0137 6.10835 0.9375 6.29917 0.9375 6.49814C0.9375 6.69711 1.0137 6.88793 1.14932 7.02862C1.28495 7.16931 1.46891 7.24835 1.66071 7.24835L8.89286 7.24835L6.51348 9.71654C6.4457 9.78629 6.39189 9.86926 6.35518 9.96068C6.31846 10.0521 6.29956 10.1502 6.29956 10.2492C6.29956 10.3482 6.31846 10.4463 6.35518 10.5377C6.39189 10.6291 6.4457 10.7121 6.51348 10.7818C6.64899 10.9216 6.83228 11 7.02335 11C7.21441 11 7.39771 10.9216 7.53321 10.7818L10.6358 7.55594C10.9074 7.27584 11.0609 6.89543 11.0625 6.49814C11.059 6.10345 10.9057 5.72609 10.6358 5.44784L7.53321 2.22193C7.39867 2.0812 7.2159 2.00142 7.02484 2.00002C6.83378 1.99861 6.64994 2.0757 6.51348 2.21443Z" fill="currentColor"></path>
        </svg>
    </li>
    <li class="flex flex-wrap items-center text-black">
        <a href="#" class="mr-3 font-medium">Consulting businesses</a>
    </li>
</ul>

Breadcrumbs from asitrastudio

Tailwind CSS

asitrastudio

Breadcrumb Navigation Bar with Homepage and Services

A thin light gray horizontal strip showing a breadcrumb trail with 'Homepage' in dark text, a slash separator, and 'Services' in muted gray indicating the current page. It provides minimal wayfinding with no visible interactive controls beyond the text links.

<section class="relative bg-coolGray-50">
  <div class="py-6 border-t border-coolGray-200">
    <div class="container mx-auto px-4">
      <div>
        <a class="inline-block text-black" href="#">Homepage</a>
        <span class="inline-block mx-4">/</span>
        <a class="inline-block text-coolGray-500" href="#">Services</a>
      </div>
    </div>
  </div>
</section>

Breadcrumbs from Coleos

Tailwind CSS

Coleos

Breadcrumb navigation with logo: Homepage > Catalogue > Product

A horizontal breadcrumb trail on a light lavender background showing the page hierarchy from Homepage through Catalogue to Product, with a four-dot colored logo at the left. Chevron separators divide the items, and the current page is shown in lighter gray.

<section class="relative bg-purple-100 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="py-5">
      <div class="flex flex-wrap items-center gap-2">
        <div class="flex items-center gap-2">
          <img src="coleos-assets/logos/logo-coleos.png" alt="">
          <a class="text-rhino-500 text-sm hover:text-rhino-500 transition duration-200" href="#">Homepage</a>
        </div>
        <div>
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
            <path d="M15.1211 12C15.1212 12.1313 15.0954 12.2614 15.0451 12.3828C14.9948 12.5041 14.9211 12.6143 14.8281 12.707L10.5859 16.9497C10.3984 17.1372 10.1441 17.2426 9.87889 17.2426C9.6137 17.2426 9.35937 17.1372 9.17186 16.9497C8.98434 16.7622 8.879 16.5079 8.879 16.2427C8.879 15.9775 8.98434 15.7232 9.17186 15.5357L12.707 12L9.17183 8.46437C8.98431 8.27686 8.87897 8.02253 8.87897 7.75734C8.87897 7.49215 8.98431 7.23782 9.17183 7.05031C9.35934 6.86279 9.61367 6.75744 9.87886 6.75744C10.144 6.75744 10.3984 6.86279 10.5859 7.0503L14.8281 11.293C14.9211 11.3857 14.9949 11.4959 15.0451 11.6173C15.0954 11.7386 15.1212 11.8687 15.1211 12Z" fill="#A0A5B8"></path>
          </svg>
        </div>
        <a class="text-rhino-500 text-sm hover:text-rhino-500 transition duration-200" href="#">Catalogue</a>
        <div>
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
            <path d="M15.1211 12C15.1212 12.1313 15.0954 12.2614 15.0451 12.3828C14.9948 12.5041 14.9211 12.6143 14.8281 12.707L10.5859 16.9497C10.3984 17.1372 10.1441 17.2426 9.87889 17.2426C9.6137 17.2426 9.35937 17.1372 9.17186 16.9497C8.98434 16.7622 8.879 16.5079 8.879 16.2427C8.879 15.9775 8.98434 15.7232 9.17186 15.5357L12.707 12L9.17183 8.46437C8.98431 8.27686 8.87897 8.02253 8.87897 7.75734C8.87897 7.49215 8.98431 7.23782 9.17183 7.05031C9.35934 6.86279 9.61367 6.75744 9.87886 6.75744C10.144 6.75744 10.3984 6.86279 10.5859 7.0503L14.8281 11.293C14.9211 11.3857 14.9949 11.4959 15.0451 11.6173C15.0954 11.7386 15.1212 11.8687 15.1211 12Z" fill="#A4AFBB"></path>
          </svg>
        </div>
        <a class="text-rhino-300 text-sm hover:text-rhino-500 transition duration-200" href="#">Product</a>
      </div>
    </div>
  </div>
</section>