In this section we will create breadcrumb with tailwind css 3. We will create breadcrumb with icons, breadcrumb with navigation with Tailwind CSS 3.
How to install & setup Tailwind CSS v3
Example 1
Basic breadcrumb with tailwind v3.
<ul class="flex flex-wrap space-x-3">
<li class="flex items-center space-x-3">
<a href="#" class="text-gray-800">Home</a>
</li>
<li class="flex items-center space-x-3">
<div class="w-px h-4 bg-gray-300 rounded-full rotate-12"></div>
<a href="#" class="text-gray-800">Posts</a>
</li>
<li class="flex items-center space-x-3">
<div class="w-px h-4 bg-gray-300 rounded-full rotate-12"></div>
<span class="text-gray-400">Show Post</span>
</li>
</ul>
Tailwind CSS 3 Breadcrumb v1
Example 2
Arrow breadcrumb with tailwind v3.
<ul class="flex flex-wrap space-x-3">
<li class="flex items-center space-x-3">
<a href="#" class="text-gray-800">Home</a>
</li>
<li class="flex items-center space-x-3">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"
stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
</svg>
<a href="#" class="text-gray-800">Posts</a>
</li>
<li class="flex items-center space-x-3">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"
stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
</svg>
<span class="text-gray-400">Show Post</span>
</li>
</ul>
Tailwind CSS 3 Breadcrumb v2
Example 3
Icons breadcrumb with tailwind v3.
<ul class="flex flex-wrap space-x-3">
<li class="flex items-center space-x-2">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"
stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
</svg>
<a href="#" class="text-gray-800">Home</a>
</li>
<li>/</li>
<li class="flex items-center space-x-2">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-gray-400" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z" />
</svg>
<span class="text-gray-400">library</span>
</li>
</ul>
Tailwind CSS 3 Breadcrumb v3
Read Also
Tailwind CSS 3 FAQ Accordion UI Example
Tailwind CSS 3 Alert Message Example
Tailwind CSS 3 Avatars Example
Tailwind CSS 3 Breadcrumb Example
Tailwind CSS v3 Cards Examples
