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

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

Author:
Samuel Dawson

2 years ago

11.3k
Breadcrumb

Author:
Ron Hicks

3 years ago

10.4k
Breadcrum
Different styles of breadcrum component

Author:
Rajesh Maheshwari

9 months ago

1.1k
Ai clone, chat ui
Chat interface for ai builder, dont toomuch focused on designing responsive

Author:
Abhiraj

10 months ago

1.7k
Breadcrumb
minimal modern breadcrumb design

Author:
OmKar Mehta

1 year ago

2.3k
ACODE MASTER — Cyberpunk Full Stack Developer from Rwanda
"I’m ACODE MASTER — a visionary Full Stack Developer from Rwanda, blending cutting-edge tech with bold design. I specialize in building modern web applications using React, Node.js, and TailwindCSS, inspired by the cyberpunk aesthetic and driven by a passion for digital innovation. Welcome to the future of code."

Author:
Code Master(Mfuranziza Dusabe Hamza)

6 months ago

1.3k
home
search home

Author:
Uwera Dorcas

6 months ago

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

Author:
Md. Tofayel islam

1 year ago

3.1k
Hero Section
Responsive Hero Section for you Project Background Image: A stunning, high-quality Unsplash photo that creates a unique visual impact. Overlay: Semi-transparent black overlay with blur effect for readability and a modern aesthetic. Content Area: Centered with a gradient background overlay for contrast, bold headline, engaging subtext. Buttons: Vibrant gradient and clean border with smooth hover animations to draw attention. Responsive Design: Looks great on all screen sizes with adaptable padding and font sizes.

Author:
KULDEEP

5 months ago

1.2k
My Coding Journey
To transform a standard timeline into an engaging, scroll-driven narrative experience.

Author:
Code Master(Mfuranziza Dusabe Hamza)

2 months ago

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

Author:
Sedat Kumcu

1 year ago

2k

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