Breadcrum

Different styles of breadcrum component

This tailwind example is contributed by Rajesh Maheshwari, on 27-Feb-2025. Component is made with Tailwind CSS v3. It is responsive.

Breadcrumb

Author Rajesh Maheshwari

946

Fork Fullscreen

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-6 py-12 px-8 w-full">

<nav class="bg-white shadow-md rounded-lg p-4">
      <ol class="flex space-x-2 text-sm text-gray-700">
        <li><a href="#" class="hover:text-indigo-600 font-medium">Home</a></li>
        <li><svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7-7 7M5 12h13"></path></svg></li>
        <li><a href="#" class="hover:text-indigo-600 font-medium">Category</a></li>
        <li><a href="#" class="text-indigo-600 font-medium">Product</a></li>
      </ol>
    </nav>

<nav class="bg-white shadow-md rounded-lg p-4">
      <ol class="flex space-x-4 text-sm text-gray-700">
        <li><a href="#" class="hover:text-indigo-600 font-medium">Home</a></li>
        <li class="text-gray-400">—</li>
        <li><a href="#" class="hover:text-indigo-600 font-medium">Category</a></li>
        <li class="text-gray-400">—</li>
        <li><a href="#" class="text-indigo-600 font-medium">Product</a></li>
      </ol>
    </nav>

<nav class="bg-white shadow-md rounded-lg p-4">
      <ol class="flex space-x-4 text-sm text-gray-700">
        <li><a href="#" class="hover:text-indigo-600 font-medium">Home</a></li>
        <li><span class="w-2.5 h-2.5 bg-indigo-600 rounded-full inline-block"></span></li>
        <li><a href="#" class="hover:text-indigo-600 font-medium">Category</a></li>
        <li><span class="w-2.5 h-2.5 bg-indigo-600 rounded-full inline-block"></span></li>
        <li><a href="#" class="text-indigo-600 font-medium">Product</a></li>
      </ol>
    </nav>

<nav class="bg-white shadow-md rounded-lg p-4">
      <ol class="flex space-x-2 text-sm text-gray-700">
        <li><a href="#" class="hover:text-indigo-600 font-medium">Home</a></li>
        <li><span class="px-2 py-1 bg-indigo-600 text-white rounded-sm">/</span></li>
        <li><a href="#" class="hover:text-indigo-600 font-medium">Category</a></li>
        <li><span class="px-2 py-1 bg-indigo-600 text-white rounded-sm">/</span></li>
        <li><a href="#" class="text-indigo-600 font-medium">Product</a></li>
      </ol>
    </nav>

<nav class="bg-white shadow-md rounded-lg p-4">
      <ol class="flex space-x-4 text-sm text-gray-700">
        <li><a href="#" class="hover:text-indigo-600 font-medium">Home</a></li>
        <li><span class="border-r border-gray-300 h-6 inline-block mx-2"></span></li>
        <li><a href="#" class="hover:text-indigo-600 font-medium">Category</a></li>
        <li><span class="border-r border-gray-300 h-6 inline-block mx-2"></span></li>
        <li><a href="#" class="text-indigo-600 font-medium">Product</a></li>
      </ol>
    </nav>

<nav class="bg-white shadow-md rounded-lg p-4">
      <ol class="flex space-x-4 text-sm text-gray-700">
        <li><a href="#" class="hover:text-indigo-600 font-medium">Home</a></li>
        <li><span class="text-gray-500">/</span></li>
        <li><a href="#" class="hover:text-indigo-600 font-medium">Category</a></li>
        <li><span class="text-gray-500">/</span></li>
        <li><a href="#" class="text-indigo-600 font-medium">Product</a></li>
      </ol>
    </nav>

<nav class="bg-white shadow-md rounded-lg p-4">
      <ol class="flex space-x-2 text-sm text-gray-700">
        <li><a href="#" class="hover:text-indigo-600 font-medium">Home</a></li>
        <li><svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7-7 7M5 12h13"></path></svg></li>
        <li><a href="#" class="hover:text-indigo-600 font-medium">Category</a></li>
        <li><svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7-7 7M5 12h13"></path></svg></li>
        <li><a href="#" class="text-indigo-600 font-medium">Product</a></li>
      </ol>
    </nav>

<nav class="bg-white shadow-md rounded-lg p-4">
      <ol class="flex space-x-4 text-sm text-gray-700">
        <li><a href="#" class="hover:text-indigo-600 font-medium border-b-2 border-transparent hover:border-indigo-600">Home</a></li>
        <li><span class="text-gray-400">/</span></li>
        <li><a href="#" class="hover:text-indigo-600 font-medium border-b-2 border-transparent hover:border-indigo-600">Category</a></li>
        <li><span class="text-gray-400">/</span></li>
        <li><a href="#" class="text-indigo-600 font-medium border-b-2 border-indigo-600">Product</a></li>
      </ol>
    </nav>

<nav class="bg-white shadow-md rounded-lg p-4">
      <ol class="flex space-x-4 text-sm text-gray-700">
        <li><a href="#" class="hover:text-indigo-600 font-medium">Home</a></li>
        <li><span class="w-3 h-3 bg-indigo-600 rounded-full inline-block"></span></li>
        <li><a href="#" class="hover:text-indigo-600 font-medium">Category</a></li>
        <li><span class="w-3 h-3 bg-indigo-600 rounded-full inline-block"></span></li>
        <li><a href="#" class="text-indigo-600 font-medium">Product</a></li>
      </ol>
    </nav>

<nav class="bg-white shadow-md rounded-lg p-4">
      <ol class="flex space-x-4 text-sm text-gray-700">
        <li><a href="#" class="hover:text-indigo-600 font-medium">Home</a></li>
        <li><svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 flex text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h13M12 5l7 7-7 7"></path></svg></li>
        <li><a href="#" class="hover:text-indigo-600 font-medium">Category</a></li>
        <li><svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h13M12 5l7 7-7 7"></path></svg></li>
        <li><a href="#" class="text-indigo-600 font-medium">Product</a></li>
      </ol>
    </nav>

</div>

Related Examples

Simple Breadcrumbs
simple yet modern breadcrumbs UI

Author:
EliteAI Tools

9 months ago

712
Gradient Breadcrumb
Breadcrumb. Gradient background. Gradient text on hover. Based on gopi/breadcrumb-2.

Author:
Nick Girga

5 months ago

695
TailwindFlex – Creative Animated Home Experience
"Innovative Home with Tailwind Animated Background" "Animated Hero – TailwindFlex Design" "Smooth UI – Creative Motion with Tailwind CSS" "Home Harmony – Motion Meets Design" "TailwindFlex Home – Fluid Animation & UI"

Author:
Code Master(Mfuranziza Dusabe Hamza)

4 months ago

725
Breadcrumbs

Author:
Sophia Baker

2 years ago

10.2k
My Coding Journey
To transform a standard timeline into an engaging, scroll-driven narrative experience.

Author:
Code Master(Mfuranziza Dusabe Hamza)

3 weeks ago

152
Breadcrumb

Author:
Laurits

2 years ago

11.4k
ACODE MASTER — Cyberpunk Full Stack Developer from Rwanda
"I’m ACODE MASTER — a visionary Full Stack Developer from Rwanda, blending cutting-edge tech with bold design. I specialize in building modern web applications using React, Node.js, and TailwindCSS, inspired by the cyberpunk aesthetic and driven by a passion for digital innovation. Welcome to the future of code."

Author:
Code Master(Mfuranziza Dusabe Hamza)

4 months ago

1k
Simple Breadcrumb Example
Simple Breadcrumb Example with Light and black background options.

Author:
Sedat Kumcu

11 months ago

2k
background
A background is the area behind the content of an element (like a page, section, or div). It helps define the look and feel by adding colors, images, gradients, or patterns.

Author:
Code Master(Mfuranziza Dusabe Hamza)

4 months ago

603
Code Editor UI
Simple code editor prototype made with HTML and TailwindCSS. A lightweight template to explore and customize.

Author:
Indra

1 month ago

118
Breadcrumb

Author:
Rajesh Maheshwari

7 months ago

654
home
search home

Author:
Uwera Dorcas

4 months ago

162

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components