Breadcrum

Different styles of breadcrum component

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

Breadcrumb

Author Rajesh Maheshwari

Tailwind v3.4 1.4k 3

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

Africa Solex Ltd
Description (ibisobanuro bya website) ni text ngufi isobanura neza icyo urubuga cyangwa sosiyete yawe ikora, ikaba ifasha no mu byerekeye SEO (Search Engine Optimization). Mu nyandiko za HTML, description ishyirwa muri meta tag muri <head>.

Ele Eriksen

1 year ago

1.3k
AI Trends Showcase
A clean and modern intelligence feed component for showcasing AI, technology, startup, and research updates with automatic rotation, smooth navigation, and responsive layouts. Perfect For Showcase AI, technology, and innovation stories using a premium editorial-style carousel. Designed with a clean dark aesthetic, automatic slide rotation, interactive breadcrumbs, navigation controls, and a responsive layout that works seamlessly across desktop and mobile devices.

Ayyamperumal S

3 months ago

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

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

786
Acode Master - FB & WhatsApp UI Combo
Description (meta description) ni tag ikoreshwa mu mutwe (head) wa HTML igaragaza mu ncamake icyo urubuga cyangwa urupapuro rwawe ruvuga. Iyi description ikoreshwa cyane na search engines (nka Google) mu kwerekana summary y’urubuga mu bisubizo by’ubushakashatsi.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.3k
ULTIMATE SNAKE
(click to https://quantum-snake.netlify.app/ )ULTIMATE SNAKE is a modern reimagining of the classic Snake game, blending retro gameplay with enhanced visuals, power-ups, and a dynamic difficulty system. Designed for both casual players and high-score chasers, this game brings nostalgia and excitement in every move.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

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

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.5k
Breadcrumb

Gopi Yadav

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

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.5k
Breadcrumb
minimal modern breadcrumb design

OmKar Mehta

2 years ago

2.9k
High-Performance Hotel Operations & AI Agent Testing Dashboard
A sophisticated, real-time command center designed for modern hotel management. This dashboard features deep integration for monitoring AI agent performance, guest sentiment, and room occupancy. Built with a "Mobile-First" philosophy, it demonstrates advanced data visualization, glassmorphism UI design, and a centralized state-management architecture. Perfect for showcasing full-stack capabilities in AI-driven automation.

Ayyamperumal S

7 months ago

987
Ai clone, chat ui
Chat interface for ai builder, dont toomuch focused on designing responsive

Abhiraj

1 year ago

3k
Expandable File Tree with Tailwind and Vanilla JS with tailwinds 4
A simple and responsive file tree component built with Tailwind CSS and vanilla JavaScript. Each folder can be expanded or collapsed with smooth transitions, including the root directory. This component is useful for project explorers, code editors, or file management UIs.

Indra

1 year ago

1.3k