Tailwind breadcrumbs

Responsive Breadcrumbs built with the latest Tailwind. Examples including different colors, animations, breadcrumbs with no background, and more.


Image placement

Basic

1
2
3
4
5
6
7
8
9
<nav class="bg-grey-light rounded font-sans w-full">
  <ol class="list-reset flex text-grey-dark">
    <li><a href="#" class="font-bold">Home</a></li>
    <li><span class="mx-2">/</span></li>
    <li><a href="#" class="font-bold">Library</a></li>
    <li><span class="mx-2">/</span></li>
    <li>Data</li>
  </ol>
</nav>

Arrows

1
2
3
4
5
6
7
8
9
<nav class="bg-grey-light rounded font-sans w-full">
  <ol class="list-reset flex text-grey-dark">
    <li><a href="#" class="font-bold">Home</a></li>
    <li><span class="mx-2">></span></li>
    <li><a href="#" class="font-bold">Library</a></li>
    <li><span class="mx-2">></span></li>
    <li>Data</li>
  </ol>
</nav>

With icons

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
  <!-- Required font awesome -->
  <!-- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" /> -->
  <nav class="bg-grey-light rounded font-sans w-full">
    <ol class="list-reset flex text-grey-dark">
      <li>
        <a href="#" class=" "
          ><i class="far fa-folder mr-2"></i>

          Home</a
        >
      </li>
      <li><span class="mx-2">></span></li>
      <li>
        <a href="#" class=" "><i class="far fa-folder mr-2"></i> Library</a>
      </li>
      <li><span class="mx-2">></span></li>
      <li>
        <a href="">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            class="w-4 h-4 stroke-current inline mr-1"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
            ></path>
            <!---->
            <!---->
            <!---->
            <!---->
            <!---->
          </svg>
          Data</a
        >
      </li>

      <!-- TODO FA replacement -->
    </ol>
  </nav>

With background:

Gray

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<nav
class="block text-sm text-left text-gray-600 bg-gray-500 bg-opacity-10 h-12 flex items-center p-4 rounded-md"
role="alert"
>
<ol class="list-reset flex text-grey-dark">
  <li><a href="#" class="font-bold">Home</a></li>
  <li><span class="mx-2">/</span></li>
  <li><a href="#" class="font-bold">Library</a></li>
  <li><span class="mx-2">/</span></li>
  <li>Data</li>
</ol>
</nav>

Green

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<nav
class="block text-sm text-left text-green-600 bg-green-500 bg-opacity-10 h-12 flex items-center p-4 rounded-md"
role="alert"
>
<ol class="list-reset flex text-grey-dark">
  <li><a href="#" class="font-bold">Home</a></li>
  <li><span class="mx-2">/</span></li>
  <li><a href="#" class="font-bold">Library</a></li>
  <li><span class="mx-2">/</span></li>
  <li>Data</li>
</ol>
</nav>

With background & border::

Gray

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<nav
class="block text-sm text-left text-gray-600 bg-gray-500 bg-opacity-10 border border-gray-400 h-12 flex items-center p-4 rounded-md"
role="alert"
>
<ol class="list-reset flex text-grey-dark">
  <li><a href="#" class="font-bold">Home</a></li>
  <li><span class="mx-2">/</span></li>
  <li><a href="#" class="font-bold">Library</a></li>
  <li><span class="mx-2">/</span></li>
  <li>Data</li>
</ol>
</nav>

Green

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<nav
class="block text-sm text-left text-green-600 bg-green-500 bg-opacity-10 border border-green-400 h-12 flex items-center p-4 rounded-md"
role="alert"
>
<ol class="list-reset flex text-grey-dark">
  <li><a href="#" class="font-bold">Home</a></li>
  <li><span class="mx-2">/</span></li>
  <li><a href="#" class="font-bold">Library</a></li>
  <li><span class="mx-2">/</span></li>
  <li>Data</li>
</ol>
</nav>