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

949

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

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

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

756
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)

5 months ago

577
Simple Breadcrumbs
simple yet modern breadcrumbs UI

Author:
EliteAI Tools

9 months ago

859
Breadcrumb

Author:
Gopi Yadav

3 years ago

9.8k
Mfuranziza Hamza
Mfuranziza Hamza full development

Author:
Code Master(Mfuranziza Dusabe Hamza)

2 months ago

461
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)

2 months ago

427
Hero Section
Responsive Hero Section for you Project Background Image: A stunning, high-quality Unsplash photo that creates a unique visual impact. Overlay: Semi-transparent black overlay with blur effect for readability and a modern aesthetic. Content Area: Centered with a gradient background overlay for contrast, bold headline, engaging subtext. Buttons: Vibrant gradient and clean border with smooth hover animations to draw attention. Responsive Design: Looks great on all screen sizes with adaptable padding and font sizes.

Author:
KULDEEP

4 months ago

1.1k
Innovative Rwanda-Canada Transport Services Website
Innovative Rwanda-Canada Transport Services Website

Author:
Code Master(Mfuranziza Dusabe Hamza)

2 months ago

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

Author:
Indra

2 months ago

131
Breadcrumbs

Author:
Prajwal Hallale

2 years ago

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

5 months ago

1.1k
Breadcrumb

Author:
Laurits

2 years ago

11.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components