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.3k
Breadcrumb with icon

Author:
Samuel Dawson

2 years ago

11.3k
Breadcrum
Different styles of breadcrum component

Author:
Rajesh Maheshwari

8 months ago

949
Acode Master - FB & WhatsApp UI Combo
Description (meta description) ni tag ikoreshwa mu mutwe (head) wa HTML igaragaza mu ncamake icyo urubuga cyangwa urupapuro rwawe ruvuga. Iyi description ikoreshwa cyane na search engines (nka Google) mu kwerekana summary y’urubuga mu bisubizo by’ubushakashatsi.

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

503
Breadcrumbs
Basic navigation trail with SVG icon

Author:
Anja Müller

2 years ago

8.1k
Africa Solex Ltd
Description (ibisobanuro bya website) ni text ngufi isobanura neza icyo urubuga cyangwa sosiyete yawe ikora, ikaba ifasha no mu byerekeye SEO (Search Engine Optimization). Mu nyandiko za HTML, description ishyirwa muri meta tag muri <head>.

Author:
Ele Eriksen

5 months ago

353
Breadcrumb

Author:
Laurits

2 years ago

11.4k
Breadcrumb

Author:
Rajesh Maheshwari

8 months ago

729
Innovative Rwanda-Canada Transport Services Website
Innovative Rwanda-Canada Transport Services Website

Author:
Code Master(Mfuranziza Dusabe Hamza)

2 months ago

295
Expandable File Tree with Tailwind and Vanilla JS with tailwinds 4
A simple and responsive file tree component built with Tailwind CSS and vanilla JavaScript. Each folder can be expanded or collapsed with smooth transitions, including the root directory. This component is useful for project explorers, code editors, or file management UIs.

Author:
Indra

2 months ago

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

Author:
Nick Girga

6 months ago

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

2 months ago

427

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