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

1.2k

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

Breadcrumbs

Author:
Prajwal Hallale

2 years ago

8.5k
SocialSphere: A Full-Stack Social Media Platform
SocialSphere is a full-stack social media platform inspired by Facebook, built using HTML CSS

Author:
Code Master(Mfuranziza Dusabe Hamza)

7 months ago

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

Author:
Nick Girga

8 months ago

925
Acode Master
Acode Master is a skilled and passionate software developer known for mastering coding and creating innovative tech solutions. Specializing in modern web technologies like React.js, Node.js, PHP, and databases such as MySQL and PostgreSQL, Acode Master builds practical, efficient, and scalable applications. Beyond coding, Acode Master is dedicated to continuous learning, sharing knowledge, and empowering others through technology-driven projects and education.

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

1.3k
Simple Breadcrumbs
simple yet modern breadcrumbs UI

Author:
EliteAI Tools

1 year ago

990
Your Creative Login Page
"Animated Image Login UI" "Tailwind Image Login with Animated Background" "Innovative User Login Experience" "Creative Bubble Background Login" "Login with Personality — Featuring Your Image" "Acode Master Animated Login" ✅ (customized for you)

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

763
Acode master
Acode master(=>good work for Acode master)

Author:
Code Master(Mfuranziza Dusabe Hamza)

7 months ago

847
Breadcrumb with icon

Author:
Samuel Dawson

2 years ago

11.4k
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)

8 months ago

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

Author:
Code Master(Mfuranziza Dusabe Hamza)

4 months ago

485
Breadcrumb

Author:
Ron Hicks

3 years ago

10.6k
Personal Portfolio Website
Nziza HAMZY 😎! Reka dukore full TailwindCSS Portfolio yuzuye na: Hero Section About Section Projects Section (cards) Contact Form Animations & hover effects Fully responsive for mobile

Author:
Code Master(Mfuranziza Dusabe Hamza)

4 months ago

547

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components