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

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

10.2k
Breadcrumb with icon

Author:
Samuel Dawson

2 years ago

11.3k
Breadcrum
Different styles of breadcrum component

Author:
Rajesh Maheshwari

7 months ago

946
home
search home

Author:
Uwera Dorcas

4 months ago

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

Author:
Indra

1 month ago

118
Simple Breadcrumbs
simple yet modern breadcrumbs UI

Author:
EliteAI Tools

9 months ago

712
Breadcrumb

Author:
Rajesh Maheshwari

7 months ago

654
Mfuranziza Hamza
Mfuranziza Hamza full development

Author:
Code Master(Mfuranziza Dusabe Hamza)

1 month ago

454
Basic breadcrumb

Author:
Ava Brown

2 years ago

9.4k
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)

1 month ago

352
Breadcrumbs
Basic navigation trail with SVG icon

Author:
Anja Müller

2 years ago

8k
ACODE,ASTER
love my projuct

Author:
Code Master(Mfuranziza Dusabe Hamza)

4 months ago

559

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

© 2025 TailwindFlex. All Rights Reserved.

v1.12