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

ACODE,ASTER
love my projuct

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.4k
Breadcrumbs
Basic navigation trail with SVG icon

Anja Müller

3 years ago

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

Sedat Kumcu

1 year ago

2.7k
Breadcrumb

Ron Hicks

4 years ago

11.5k
Rwanda-Canada Transport Services | Safe & Reliable Shipping
Attractive color scheme inspired by Rwanda's landscapes

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.1k
Breadcrumbs

Sophia Baker

3 years ago

11k
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.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

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

Nick Girga

1 year ago

1.6k
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

4 months ago

322
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
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
Acode master
Acode master(=>good work for Acode master)

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.6k