In this tutorial we will see simple breadcrumbs, breadcrumbs with divider class , breadcrumbs with SVG Icon , examples with Tailwind CSS
Tool Use
Tailwind CSS 2.x / 3.x
Heroicons Icons
Setup Project
Using CDN
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
or
The Easiest way to install Tailwind CSS with Tailwind CLI
Example 1
Simple Breadcrumbs
<h3 class="p-4 text-3xl text-center text-bold">Simple Breadcrumbs</h3>
<div class="container flex justify-center mx-auto">
<div class="w-full p-3 m-4 bg-gray-200 rounded">
<ol class="flex text-gray-800">
<li><a href="#" class="font-bold">Home</a></li>
<li><span class="mx-2">/</span></li>
<li><a href="#">Blog</a></li>
<li><span class="mx-2">/</span></li>
<li>First Blog</li>
</ol>
</div>
</div>
<div class="container flex justify-center mx-auto">
<div class="w-full p-3 m-4 bg-green-200 rounded">
<ol class="flex text-green-800">
<li><a href="#" class="font-bold ">Home</a></li>
<li><span class="mx-2">/</span></li>
<li><a href="#">Blog</a></li>
<li><span class="mx-2">/</span></li>
<li>First Blog</li>
</ol>
</div>
</div>
<div class="container flex justify-center mx-auto">
<div class="w-full p-3 m-4 bg-blue-200 rounded">
<ol class="flex text-blue-800">
<li><a href="#" class="font-bold ">Home</a></li>
<li><span class="mx-2">/</span></li>
<li><a href="#">Blog</a></li>
<li><span class="mx-2">/</span></li>
<li>First Blog</li>
</ol>
</div>
</div>
Example 2
Breadcrumbs Using Divider class
<h3 class="p-4 text-3xl text-center text-bold"> Breadcrumbs Using Divider</h3>
<div class="container flex justify-center mx-auto">
<div class="w-full p-3 m-4 bg-gray-200 rounded">
<ol class="flex text-gray-800 divide-x divide-gray-800">
<li class="pr-4"><a href="#">Home</a></li>
<li class="px-4"><a href="#">Blog</a></li>
<li class="px-4 text-gray-700" aria-current="page">First Blog</li>
</ol>
</div>
</div>
<div class="container flex justify-center mx-auto">
<div class="w-full p-3 m-4 bg-blue-200 rounded">
<ol class="flex text-blue-800 divide-x divide-blue-800">
<li class="pr-4"><a href="#">Home</a></li>
<li class="px-4"><a href="#">Blog</a></li>
<li class="px-4 text-blue-700" aria-current="page">First Blog</li>
</ol>
</div>
</div>
<div class="container flex justify-center mx-auto">
<div class="w-full p-3 m-4 bg-green-200 rounded">
<ol class="flex text-green-800 divide-x divide-green-800">
<li class="pr-4"><a href="#">Home</a></li>
<li class="px-4"><a href="#">Blog</a></li>
<li class="px-4 text-green-700" aria-current="page">First Blog</li>
</ol>
</div>
</div>
Example 3
Breadcrumbs with SVG Icon
<h3 class="p-4 text-3xl text-center text-bold"> Breadcrumbs with SVG Icon</h3>
<div class="container flex justify-center mx-auto">
<div class="w-full p-3 m-4 bg-green-200 rounded">
<ol class="flex items-center text-green-800">
<li class="flex items-center">
<a href="#" class="font-bold ">Home</a>
<span class="ml-2"><svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 5l7 7-7 7" />
</svg></span>
</li>
<li class="flex items-center ml-2">
<a href="#" class="font-bold">Blog</a>
<span class="ml-2"><svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 5l7 7-7 7" />
</svg></span>
</li>
<li class="flex items-center ml-2">
<a href="#">First Blog</a>
</li>
</ol>
</div>
</div>
<div class="container flex justify-center mx-auto">
<div class="w-full p-3 m-4 bg-blue-200 rounded">
<ol class="flex items-center text-blue-800">
<li class="flex items-center">
<a href="#" class="font-bold">Home</a>
<span class="ml-2"><svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 5l7 7-7 7" />
</svg></span>
</li>
<li class="flex items-center ml-2">
<a href="#" class="font-bold">Blog</a>
<span class="ml-2"><svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 5l7 7-7 7" />
</svg></span>
</li>
<li class="flex items-center ml-2">
<a href="#">First Blog</a>
</li>
</ol>
</div>
</div>
More Components
Responsive Card Grid With Tailwind CSS
Tailwind CSS Responsive Image Gallery with Grid