Tailwind CSS 3 Breadcrumb Example

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

How to use dark mode toggle switch in Tailwind CSS 3

Tailwind CSS 3 Login Page UI Example