Breadcrumbs

Copy-paste ready breadcrumb navigation components

← Back to Home

Basic Breadcrumb

Simple breadcrumb navigation with links

HTML 
<nav class="flex" aria-label="Breadcrumb">
  <ol class="flex items-center space-x-2">
    <li>
      <a href="/" class="text-gray-500 hover:text-gray-700">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
          <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path>
        </svg>
      </a>
    </li>
    <li class="flex items-center">
      <svg class="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">...</svg>
      <a href="#" class="ml-2 text-sm font-medium text-gray-500 hover:text-gray-700">Products</a>
    </li>
    <li class="flex items-center">
      <svg class="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">...</svg>
      <span class="ml-2 text-sm font-medium text-gray-900" aria-current="page">Smartphones</span>
    </li>
  </ol>
</nav>

Breadcrumb with Slash Separator

Using slash "/" as separator

HTML 
<nav class="flex" aria-label="Breadcrumb">
  <ol class="flex items-center space-x-2">
    <li>
      <a href="/" class="text-sm font-medium text-blue-600 hover:text-blue-800">Home</a>
    </li>
    <li class="flex items-center">
      <span class="mx-2 text-gray-400">/</span>
      <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-800">Dashboard</a>
    </li>
    <li class="flex items-center">
      <span class="mx-2 text-gray-400">/</span>
      <span class="text-sm font-medium text-gray-900" aria-current="page">Account</span>
    </li>
  </ol>
</nav>

Breadcrumb with Background

Breadcrumb with subtle background

HTML 
<nav class="bg-gray-100 px-4 py-3 rounded-lg" aria-label="Breadcrumb">
  <ol class="flex items-center space-x-2">
    <li>
      <a href="/" class="flex items-center text-sm font-medium text-gray-700 hover:text-gray-900">
        <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">...</svg>
        Home
      </a>
    </li>
    <li class="flex items-center">
      <svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">...</svg>
      <a href="#" class="ml-2 text-sm font-medium text-gray-700 hover:text-gray-900">Projects</a>
    </li>
    <li class="flex items-center">
      <svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">...</svg>
      <span class="ml-2 text-sm font-medium text-gray-900" aria-current="page">Project Alpha</span>
    </li>
  </ol>
</nav>

Compact Breadcrumb

Smaller breadcrumb for tight spaces

HTML 
<nav class="flex" aria-label="Breadcrumb">
  <ol class="flex items-center space-x-1">
    <li>
      <a href="/" class="text-xs text-gray-500 hover:text-gray-700">Home</a>
    </li>
    <li class="flex items-center">
      <span class="mx-1 text-xs text-gray-400">›</span>
      <a href="#" class="text-xs text-gray-500 hover:text-gray-700">Blog</a>
    </li>
    <li class="flex items-center">
      <span class="mx-1 text-xs text-gray-400">›</span>
      <span class="text-xs text-gray-900" aria-current="page">Article Title</span>
    </li>
  </ol>
</nav>

Breadcrumb with Badges

Breadcrumb with status badges

HTML 
<nav class="flex" aria-label="Breadcrumb">
  <ol class="flex items-center space-x-2">
    <li>
      <a href="/" class="flex items-center text-sm font-medium text-gray-600">Dashboard</a>
    </li>
    <li class="flex items-center">
      <svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">...</svg>
      <a href="#" class="ml-2 flex items-center gap-2 text-sm font-medium text-gray-600">
        Orders
        <span class="px-2 py-0.5 text-xs bg-blue-100 text-blue-800 rounded-full">24</span>
      </a>
    </li>
    <li class="flex items-center">
      <svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">...</svg>
      <span class="ml-2 flex items-center gap-2 text-sm font-medium text-gray-900" aria-current="page">
        Order #12345
        <span class="px-2 py-0.5 text-xs bg-green-100 text-green-800 rounded-full">Delivered</span>
      </span>
    </li>
  </ol>
</nav>

Breadcrumb with Ellipsis

Collapsed breadcrumb for long paths

HTML 
<nav class="flex" aria-label="Breadcrumb">
  <ol class="flex items-center space-x-2">
    <li>
      <a href="/" class="text-gray-500 hover:text-gray-700">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">...</svg>
      </a>
    </li>
    <li class="flex items-center">
      <svg class="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">...</svg>
      <button class="ml-2 text-sm font-medium text-gray-500 hover:text-gray-700">...</button>
    </li>
    <li class="flex items-center">
      <svg class="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">...</svg>
      <a href="#" class="ml-2 text-sm font-medium text-gray-500 hover:text-gray-700">Category</a>
    </li>
    <li class="flex items-center">
      <svg class="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">...</svg>
      <span class="ml-2 text-sm font-medium text-gray-900" aria-current="page">Current Page</span>
    </li>
  </ol>
</nav>