Breadcrumb

Indicate the current page’s location within a navigational hierarchy that automatically adds separators.

Example

Use an ordered or unordered list with linked list items to create a minimally styled breadcrumb.

			                
			                  <nav aria-label="breadcrumb" class="mb-4">
			                    <ol class="flex flex-wrap justify-start bg-transparent text-sm mb-0 space-x-1">
			                      <li>
			                        <a href="#" class="hover:text-indigo-500">
			                          Home
			                        </a>
			                      </li>
			                    </ol>
			                  </nav>

			                  <nav aria-label="breadcrumb" class="mb-4">
			                    <ol class="flex flex-wrap justify-start bg-transparent text-sm mb-0 space-x-1">
			                      <li>
			                        <a href="#" class="hover:text-indigo-500">
			                          Home
			                          <svg xmlns="http://www.w3.org/2000/svg" class="mx-1 transform ltr:rotate-0 rtl:rotate-180 inline-block" width="1rem" height="1rem" fill="currentColor" viewBox="0 0 512 512"><polyline points="184 112 328 256 184 400" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px"></polyline></svg>
			                        </a>
			                      </li>
			                      <li>
			                        <a href="#" class="hover:text-indigo-500">
			                          Category
			                        </a>
			                      </li>
			                    </ol>
			                  </nav>

			                  <nav aria-label="breadcrumb" class="mb-4">
			                    <ol class="flex flex-wrap justify-start bg-transparent text-sm mb-0 space-x-1">
			                      <li>
			                        <a href="#" class="hover:text-indigo-500">
			                          Home
			                          <svg xmlns="http://www.w3.org/2000/svg" class="mx-1 transform ltr:rotate-0 rtl:rotate-180 inline-block" width="1rem" height="1rem" fill="currentColor" viewBox="0 0 512 512"><polyline points="184 112 328 256 184 400" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px"></polyline></svg>
			                        </a>
			                      </li>
			                      <li>
			                        <a href="#" class="hover:text-indigo-500">
			                          Category
			                          <svg xmlns="http://www.w3.org/2000/svg" class="mx-1 transform ltr:rotate-0 rtl:rotate-180 inline-block" width="1rem" height="1rem" fill="currentColor" viewBox="0 0 512 512"><polyline points="184 112 328 256 184 400" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px"></polyline></svg>
			                        </a>
			                      </li>
			                      <li class="hidden md:block text-blue-700" aria-current="page">Business</li>
			                    </ol>
			                  </nav>
			                
			              

Dark Breadcrumb

			                
			                  <nav aria-label="breadcrumb" class="mb-4">
			                    <ol class="flex flex-wrap justify-start bg-transparent text-sm mb-0 space-x-1">
			                      <li>
			                        <a href="#" class="text-gray-200 hover:text-white">
			                          Home
			                        </a>
			                      </li>
			                    </ol>
			                  </nav>

			                  <nav aria-label="breadcrumb" class="mb-4">
			                    <ol class="flex flex-wrap justify-start bg-transparent text-sm mb-0 space-x-1">
			                      <li>
			                        <a href="#" class="text-gray-200 hover:text-white">
			                          Home
			                          <svg xmlns="http://www.w3.org/2000/svg" class="mx-1 transform ltr:rotate-0 rtl:rotate-180 inline-block" width="1rem" height="1rem" fill="currentColor" viewBox="0 0 512 512"><polyline points="184 112 328 256 184 400" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px"></polyline></svg>
			                        </a>
			                      </li>
			                      <li>
			                        <a href="#" class="text-gray-200 hover:text-white">
			                          Category
			                        </a>
			                      </li>
			                    </ol>
			                  </nav>

			                  <nav aria-label="breadcrumb" class="mb-4">
			                    <ol class="flex flex-wrap justify-start bg-transparent text-sm mb-0 space-x-1">
			                      <li>
			                        <a href="#" class="text-gray-200 hover:text-white">
			                          Home
			                          <svg xmlns="http://www.w3.org/2000/svg" class="mx-1 transform ltr:rotate-0 rtl:rotate-180 inline-block" width="1rem" height="1rem" fill="currentColor" viewBox="0 0 512 512"><polyline points="184 112 328 256 184 400" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px"></polyline></svg>
			                        </a>
			                      </li>
			                      <li>
			                        <a href="#" class="text-gray-200 hover:text-white">
			                          Category
			                          <svg xmlns="http://www.w3.org/2000/svg" class="mx-1 transform ltr:rotate-0 rtl:rotate-180 inline-block" width="1rem" height="1rem" fill="currentColor" viewBox="0 0 512 512"><polyline points="184 112 328 256 184 400" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px"></polyline></svg>
			                        </a>
			                      </li>
			                      <li class="hidden md:block text-white" aria-current="page">Business</li>
			                    </ol>
			                  </nav>
			                
			              

Edit breadcrumb from left to center replace justify-start with justify-center