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

2.3k

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

Simple Breadcrumbs
simple yet modern breadcrumbs UI

Author:
EliteAI Tools

1 year ago

998
Skywings
used in traveling flight

Author:
INGRIDE MUZIRANENGE

2 months ago

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

Author:
Nick Girga

9 months ago

932
Breadcrumb
minimal modern breadcrumb design

Author:
OmKar Mehta

1 year ago

2.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)

8 months ago

842
Default breadcrumb
Use the following breadcrumb example to show the hierarchical structure of pages

Author:
Md. Tofayel islam

1 year ago

3.3k
Breadcrumb

Author:
Gopi Yadav

3 years ago

10.1k
Why Everyone Around the World Loves Us
"Our platform is built to serve everyone, everywhere — with speed, security, and a human touch." "From cities to remote villages, our features connect the world through technology that truly cares." "Designed with the whole world in mind — fast, secure, and made for real people." "No matter who you are or where you're from, our tools are built to empower and inspire you." "We believe great technology should be accessible, safe, and helpful to all — and that's exactly what we offer."

Author:
Nicole Shalom

8 months ago

1.1k
Breadcrumb with icon

Author:
Samuel Dawson

2 years ago

11.5k
background
A background is the area behind the content of an element (like a page, section, or div). It helps define the look and feel by adding colors, images, gradients, or patterns.

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

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

Author:
Code Master(Mfuranziza Dusabe Hamza)

7 months ago

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

Author:
Indra

5 months ago

404

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components