Notifications

3 new

Marcus Silva assigned you to Q3 Revenue Report

10 minutes ago

Emma Wilson commented on Homepage Redesign

45 minutes ago

James Miller mentioned you in Sprint Planning

2 hours ago

Sarah Chen uploaded Q2 Analytics Deck

3 hours ago

David Kim requested review on API Integration PR

5 hours ago

View all notifications

Breadcrumb

Breadcrumb navigation examples.

Basic Breadcrumb

Home Documentation Breadcrumb

<div class="flex items-center gap-2 text-sm text-gray-500">
  <a href="#" class="text-gray-500 hover:text-alpine-500 transition-colors">Home</a>
  <svg class="w-4 h-4 text-gray-400 flex-shrink-0" 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"/></svg>
  <a href="#" class="text-gray-500 hover:text-alpine-500 transition-colors">Components</a>
  <svg class="w-4 h-4 text-gray-400 flex-shrink-0" 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"/></svg>
  <span class="text-alpine-500 font-medium">Breadcrumb</span>
</div>

With Icons

Home Documentation Breadcrumb

<div class="flex items-center gap-2 text-sm text-gray-500">
  <a href="#" class="text-gray-500 hover:text-alpine-500 transition-colors flex items-center gap-1.5">
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>
    Home
  </a>
  <svg class="w-4 h-4 text-gray-400 flex-shrink-0" 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"/></svg>
  <a href="#" class="text-gray-500 hover:text-alpine-500 transition-colors">Components</a>
  <svg class="w-4 h-4 text-gray-400 flex-shrink-0" 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"/></svg>
  <span class="text-alpine-500 font-medium">Breadcrumb</span>
</div>

With Background

Home Documentation Breadcrumb

<div class="bg-gray-50 rounded-lg px-4 py-3">
  <div class="flex items-center gap-2 text-sm text-gray-500">
    <a href="#" class="text-gray-500 hover:text-alpine-500 transition-colors">Home</a>
    <svg class="w-4 h-4 text-gray-400" ...><!-- chevron --></svg>
    <a href="#" class="text-gray-500 hover:text-alpine-500 transition-colors">Components</a>
    <svg class="w-4 h-4 text-gray-400" ...><!-- chevron --></svg>
    <span class="text-alpine-500 font-medium">Breadcrumb</span>
  </div>
</div>

Different Separators

Home / Documentation / Breadcrumb

Home > Documentation > Breadcrumb

Home • Documentation • Breadcrumb

Home Documentation Breadcrumb