navarrow-breadcrumbintermediate

Arrow Breadcrumb

A stepped breadcrumb with arrow-shaped segments, showing progress through a multi-step flow.

Preview

<nav class="flex">
  <a href="#" class="flex items-center px-5 py-2 bg-blue-600 text-white text-sm font-medium rounded-l-lg">Cart</a>
  <div class="w-0 h-0 border-y-[20px] border-y-transparent border-l-[12px] border-l-blue-600"></div>
  <a href="#" class="flex items-center px-5 py-2 bg-blue-500 text-white text-sm font-medium -ml-px">Shipping</a>
  <div class="w-0 h-0 border-y-[20px] border-y-transparent border-l-[12px] border-l-blue-500"></div>
  <a href="#" class="flex items-center px-5 py-2 bg-gray-200 text-gray-500 text-sm font-medium -ml-px">Payment</a>
  <div class="w-0 h-0 border-y-[20px] border-y-transparent border-l-[12px] border-l-gray-200"></div>
  <span class="flex items-center px-5 py-2 bg-gray-100 text-gray-400 text-sm font-medium -ml-px rounded-r-lg">Review</span>
</nav>

Color Breakdown

Active Step

bg-blue-600

#2563eb

Current Step

bg-blue-500

#3b82f6

Upcoming Step

bg-gray-200

#e5e7eb

Inactive Text

text-gray-500

#6b7280

Active Text

text-white

#ffffff

Dark Mode Variant

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

dark:bg-blue-700 dark:bg-gray-700 dark:text-gray-400

Use Cases

Checkout flowsMulti-step wizardsOnboarding progress

Browser Support

All modern browsers.

Related Recipes

Transparent Navbar

nav - intermediate

Dark Navbar

nav - beginner

Sidebar Navigation

nav - intermediate

Styled Breadcrumb

nav - beginner

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

How do the arrow shapes work?▼

The arrows are created with CSS triangles using border tricks. A zero-width div with transparent top/bottom borders and a colored left border creates a right-pointing triangle.