navbreadcrumbbeginner

Styled Breadcrumb

A breadcrumb navigation with chevron separators and active page highlighting.

Preview

<nav class="flex items-center gap-2 text-sm" aria-label="Breadcrumb">
  <a href="#" class="text-gray-500 hover:text-gray-700 transition-colors">Home</a>
  <svg class="w-4 h-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
  <a href="#" class="text-gray-500 hover:text-gray-700 transition-colors">Products</a>
  <svg class="w-4 h-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
  <span class="text-gray-900 font-medium">Wireless Headphones</span>
</nav>

Color Breakdown

Link Text

text-gray-500

#6b7280

Link Hover

hover:text-gray-700

#374151

Separator

text-gray-300

#d1d5db

Current Page

text-gray-900

#111827

Dark Mode Variant

Add these Tailwind classes for a dark mode adaptation of this recipe.

dark:text-gray-400 dark:hover:text-white dark:text-gray-600 dark:text-white

Use Cases

E-commerce product pagesDocumentation sitesMulti-level site navigation

Browser Support

All modern browsers.

Related Recipes

Dark Footer

section - beginner

Transparent Navbar

nav - intermediate

Dark Navbar

nav - beginner

Sidebar Navigation

nav - intermediate

Tab Navigation

nav - beginner

Bottom Navigation

nav - beginner

Build Your Own Color Recipe

Use our Tailwind CSS tools to experiment with colors, gradients, and component styles.

Explore Tools

Frequently Asked Questions

Should I use a slash or chevron separator?▼

Chevrons are more common and visually indicate direction. Use / for simpler designs or developer-focused UIs.