Home
Gopi Yadav
Breadcrumb

Breadcrumb

This tailwind example is contributed by Gopi Yadav, on 02-Oct-2022. Component is made with Tailwind CSS v3.

Breadcrumb

Author Gopi Yadav

10k

12

Fork Fullscreen

<div class="bg-gray-100 rounded-lg p-3 flex items-center flex-wrap">
  <ul class="flex items-center">
	<li class="inline-flex items-center">
	  <a href="#" class="text-gray-600 hover:text-blue-500">
		<svg class="w-5 h-auto fill-current mx-2 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z"/></svg>
	  </a>

<span class="mx-4 h-auto text-gray-400 font-medium">/</span>
	</li>

<li class="inline-flex items-center">
	  <a href="#" class="text-gray-600 hover:text-blue-500">
		Page 1
	  </a>

<span class="mx-4 h-auto text-gray-400 font-medium">/</span>
	</li>

<li class="inline-flex items-center">
	  <a href="#" class="text-gray-600 hover:text-blue-500">
		Page 2
	  </a>

<span class="mx-4 h-auto text-gray-400 font-medium">/</span>
	</li>

<li class="inline-flex items-center">
	  <a href="#" class="text-gray-600 hover:text-blue-500 text-blue-500">
		Page 3
	  </a>
	</li>
  </ul>
</div>

Related Examples

Breadcrumbs

Author:
Sophia Baker

3 years ago

10.5k
Breadcrumb with icon

Author:
Samuel Dawson

2 years ago

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

Author:
Sedat Kumcu

1 year ago

2.3k
home
search home

Author:
Uwera Dorcas

7 months ago

350
Basic breadcrumb

Author:
Ava Brown

2 years ago

9.5k
ACODE,ASTER
love my projuct

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

727
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

917
Breadcrumb
minimal modern breadcrumb design

Author:
OmKar Mehta

1 year ago

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

Author:
Code Master(Mfuranziza Dusabe Hamza)

6 months ago

558
Mfuranziza Hamza
Mfuranziza Hamza full development

Author:
Code Master(Mfuranziza Dusabe Hamza)

4 months ago

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

4 months ago

547
Breadcrumbs
Basic navigation trail with SVG icon

Author:
Anja Müller

2 years ago

8.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2026 TailwindFlex. All Rights Reserved.

v1.12