Skip to content
Early Access

Breadcrumb

Breadcrumbs are a navigational UI component that helps users keep track of their location within a website or web app.

Basic Breadcrumb

PreviewCode
<nav aria-label="breadcrumb">
  <ul class="flex flex-wrap space-x-3 text-sm font-medium">
    <li class="flex items-center space-x-3">
      <a href="#" class="text-slate-800 hover:text-slate-600">Dashboard</a>
    </li>
    <li class="flex items-center space-x-3">
      <div aria-hidden="true" class="h-4 w-px rotate-12 rounded-full bg-slate-300">
      </div>
      <a href="#" class="text-slate-800 hover:text-slate-600">Reports</a>
    </li>
    <li class="flex items-center space-x-3" aria-current="page">
      <div aria-hidden="true" class="h-4 w-px rotate-12 rounded-full bg-slate-300">
      </div>
      <a href="#" class="text-slate-400">Export</a>
    </li>
  </ul>
</nav>

More Items

PreviewCode
<nav aria-label="breadcrumb">
  <ul class="flex flex-wrap space-x-3 text-sm font-medium">
    <li class="flex items-center space-x-3">
      <a href="#" class="text-slate-800 hover:text-slate-600">Dashboard</a>
    </li>
    <li class="flex items-center space-x-3" aria-current="page">
      <div aria-hidden="true" class="h-4 w-px rotate-12 rounded-full bg-slate-300">
      </div>
      <a href="#" class="text-slate-400">Social</a>
    </li>
  </ul>
</nav>
<nav aria-label="breadcrumb">
  <ul class="flex flex-wrap space-x-3 text-sm font-medium">
    <li class="flex items-center space-x-3">
      <a href="#" class="text-slate-800 hover:text-slate-600">Dashboard</a>
    </li>
    <li class="flex items-center space-x-3">
      <div aria-hidden="true" class="h-4 w-px rotate-12 rounded-full bg-slate-300">
      </div>
      <a href="#" class="text-slate-800 hover:text-slate-600">Reports</a>
    </li>
    <li class="flex items-center space-x-3" aria-current="page">
      <div aria-hidden="true" class="h-4 w-px rotate-12 rounded-full bg-slate-300">
      </div>
      <a href="#" class="text-slate-400">Export</a>
    </li>
  </ul>
</nav>
<nav aria-label="breadcrumb">
  <ul class="flex flex-wrap space-x-3 text-sm font-medium">
    <li class="flex items-center space-x-3">
      <a href="#" class="text-slate-800 hover:text-slate-600">Dashboard</a>
    </li>
    <li class="flex items-center space-x-3">
      <div aria-hidden="true" class="h-4 w-px rotate-12 rounded-full bg-slate-300">
      </div>
      <a href="#" class="text-slate-800 hover:text-slate-600">Reports</a>
    </li>
    <li class="flex items-center space-x-3">
      <div aria-hidden="true" class="h-4 w-px rotate-12 rounded-full bg-slate-300">
      </div>
      <a href="#" class="text-slate-800 hover:text-slate-600">Export</a>
    </li>
    <li class="flex items-center space-x-3" aria-current="page">
      <div aria-hidden="true" class="h-4 w-px rotate-12 rounded-full bg-slate-300">
      </div>
      <a href="#" class="text-slate-400">Social</a>
    </li>
  </ul>
</nav>
<nav aria-label="breadcrumb">
  <ul class="flex flex-wrap space-x-3 text-sm font-medium">
    <li class="flex items-center space-x-3">
      <a href="#" class="text-slate-800 hover:text-slate-600">Dashboard</a>
    </li>
    <li class="flex items-center space-x-3">
      <div aria-hidden="true" class="h-4 w-px rotate-12 rounded-full bg-slate-300">
      </div>
      <a href="#" class="text-slate-800 hover:text-slate-600">···</a>
    </li>
    <li class="flex items-center space-x-3">
      <div aria-hidden="true" class="h-4 w-px rotate-12 rounded-full bg-slate-300">
      </div>
      <a href="#" class="text-slate-800 hover:text-slate-600">Reports</a>
    </li>
    <li class="flex items-center space-x-3">
      <div aria-hidden="true" class="h-4 w-px rotate-12 rounded-full bg-slate-300">
      </div>
      <a href="#" class="text-slate-800 hover:text-slate-600">Export</a>
    </li>
    <li class="flex items-center space-x-3" aria-current="page">
      <div aria-hidden="true" class="h-4 w-px rotate-12 rounded-full bg-slate-300">
      </div>
      <a href="#" class="text-slate-400">Social</a>
    </li>
  </ul>
</nav>

Caret

PreviewCode
<nav aria-label="breadcrumb">
  <ul class="flex flex-wrap space-x-3 text-sm font-medium">
    <li class="flex items-center space-x-3">
      <a href="#" class="text-slate-800 hover:text-slate-600">Dashboard</a>
    </li>
    <li class="flex items-center space-x-3">
      <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 shrink-0 text-slate-500">
        <path d="m9 18 6-6-6-6">
        </path>
      </svg>
      <a href="#" class="text-slate-800 hover:text-slate-600">Reports</a>
    </li>
    <li class="flex items-center space-x-3" aria-current="page">
      <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 shrink-0 text-slate-500">
        <path d="m9 18 6-6-6-6">
        </path>
      </svg>
      <a href="#" class="text-slate-400">Export</a>
    </li>
  </ul>
</nav>