Application toolkit - Breadcrumb

Breadcrumbs are a navigation system used to show a user's location in a site or app.

Chevrons

The simple form of chevron breadcrumbs.

Open this chevrons breadcrumb example in new window
Copy chevrons breadcrumb code 
<ol class="flex items-center whitespace-nowrap min-w-0" aria-label="Breadcrumb">
  <li class="text-sm">
    <a class="flex items-center text-gray-500 hover:text-blue-600" href="#">
      Home
      <svg class="flex-shrink-0 mx-3 overflow-visible h-2.5 w-2.5 text-gray-400 dark:text-gray-600" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
      </svg>
    </a>
  </li>
  <li class="text-sm">
    <a class="flex items-center text-gray-500 hover:text-blue-600" href="#">
      App Center
      <svg class="flex-shrink-0 mx-3 overflow-visible h-2.5 w-2.5 text-gray-400 dark:text-gray-600" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
      </svg>
    </a>
  </li>
  <li class="text-sm font-semibold text-gray-800 truncate dark:text-gray-200" aria-current="page">
    Application
  </li>
</ol>
Close chevrons breadcrumb code

Slashes

The simple form of slashes breadcrumbs.

Open this slashes breadcrumb example in new window
Copy slashes breadcrumb code 
<ol class="flex items-center whitespace-nowrap min-w-0" aria-label="Breadcrumb">
  <li class="text-sm text-gray-600 dark:text-gray-400">
    <a class="flex items-center hover:text-blue-600" href="#">
      Home
      <svg class="flex-shrink-0 h-5 w-5 text-gray-400 dark:text-gray-600 mx-2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <path d="M6 13L10 3" stroke="currentColor" stroke-linecap="round" />
      </svg>
    </a>
  </li>

  <li class="text-sm text-gray-600 dark:text-gray-400">
    <a class="flex items-center hover:text-blue-600" href="#">
      App Center
      <svg class="flex-shrink-0 h-5 w-5 text-gray-400 dark:text-gray-600 mx-2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <path d="M6 13L10 3" stroke="currentColor" stroke-linecap="round" />
      </svg>
    </a>
  </li>

  <li class="text-sm font-semibold text-gray-800 truncate dark:text-gray-200" aria-current="page">
    Application
  </li>
</ol>
Close slashes breadcrumb code

With icons

Example with icons.

Open this icons breadcrumb example in new window
Copy icons breadcrumb code 
<ol class="flex items-center whitespace-nowrap min-w-0" aria-label="Breadcrumb">
  <li class="text-sm">
    <a class="flex items-center text-gray-500 hover:text-blue-600" href="#">
      <svg class="flex-shrink-0 mr-3 h-4 w-4 text-gray-600 dark:text-gray-600" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="M2 13.5V7h1v6.5a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5V7h1v6.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5zm11-11V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z" />
        <path fill-rule="evenodd" d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z" />
      </svg>
      Home
      <svg class="flex-shrink-0 mx-3 overflow-visible h-2.5 w-2.5 text-gray-400 dark:text-gray-600" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
      </svg>
    </a>
  </li>
  <li class="text-sm">
    <a class="flex items-center text-gray-500 hover:text-blue-600" href="#">
      <svg class="flex-shrink-0 mr-3 h-4 w-4 text-gray-600 dark:text-gray-600" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
        <path d="M5.5 2A3.5 3.5 0 0 0 2 5.5v5A3.5 3.5 0 0 0 5.5 14h5a3.5 3.5 0 0 0 3.5-3.5V8a.5.5 0 0 1 1 0v2.5a4.5 4.5 0 0 1-4.5 4.5h-5A4.5 4.5 0 0 1 1 10.5v-5A4.5 4.5 0 0 1 5.5 1H8a.5.5 0 0 1 0 1H5.5z" />
        <path d="M16 3a3 3 0 1 1-6 0 3 3 0 0 1 6 0z" />
      </svg>
      App Center
      <svg class="flex-shrink-0 mx-3 overflow-visible h-2.5 w-2.5 text-gray-400 dark:text-gray-600" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
      </svg>
    </a>
  </li>
  <li class="text-sm font-semibold text-gray-800 truncate dark:text-gray-200" aria-current="page">
    Application
  </li>
</ol>
Close icons breadcrumb code