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

9.7k

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

2 years ago

10k
Breadcrumb with icon

Author:
Samuel Dawson

2 years ago

11.3k
Mfuranziza Hamza
Mfuranziza Hamza full development

Author:
Code Master(Mfuranziza Dusabe Hamza)

3 weeks ago

251
Breadcrumbs
Basic navigation trail with SVG icon

Author:
Anja Müller

2 years ago

8k
Innovative Rwanda-Canada Transport Services Website
Innovative Rwanda-Canada Transport Services Website

Author:
Code Master(Mfuranziza Dusabe Hamza)

4 weeks ago

146
home
search home

Author:
Uwera Dorcas

3 months ago

161
Simple Breadcrumbs
simple yet modern breadcrumbs UI

Author:
EliteAI Tools

8 months ago

710
Simple Breadcrumb Example
Simple Breadcrumb Example with Light and black background options.

Author:
Sedat Kumcu

10 months ago

1.9k
Basic breadcrumb

Author:
Ava Brown

2 years ago

9.4k
Breadcrumb
minimal modern breadcrumb design

Author:
OmKar Mehta

1 year ago

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

Author:
Indra

3 weeks ago

96
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

3 months ago

694

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ 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

© 2025 TailwindFlex. All Rights Reserved.

v1.1