Home
Sedat Kumcu
Simple Breadcrumb Example

Simple Breadcrumb Example

Simple Breadcrumb Example with Light and black background options.

This tailwind example is contributed by Sedat Kumcu, on 07-Nov-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Breadcrumb

Author Sedat Kumcu

373

Fork Fullscreen

<div class="flex items-center text-gray-700 text-sm font-medium space-x-2">
    <a href="#" class="text-indigo-600 hover:text-indigo-800 transition-colors">Home</a>
    <span class="text-gray-400">/</span>
    
    <a href="#" class="text-indigo-600 hover:text-indigo-800 transition-colors">Category</a>
    <span class="text-gray-400">/</span>
    
    <a href="#" class="text-indigo-600 hover:text-indigo-800 transition-colors">Subcategory</a>
    <span class="text-gray-400">/</span>
    
    <span class="text-gray-500 font-semibold">Current Page</span>
</div>

<nav class="flex items-center text-gray-200 text-sm font-medium space-x-2 bg-black p-4 rounded">
    <a href="#" class="text-gray-300 hover:text-white transition-colors">Home</a>
    <span class="text-gray-500">/</span>
    
    <a href="#" class="text-gray-300 hover:text-white transition-colors">Category</a>
    <span class="text-gray-500">/</span>
    
    <a href="#" class="text-gray-300 hover:text-white transition-colors">Subcategory</a>
    <span class="text-gray-500">/</span>
    
    <span class="text-gray-100 font-semibold">Current Page</span>
</nav>

Related Examples