tailwind css simple breadcrumbs examples

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>
tailwind breadcrumb v1

tailwind breadcrumb v1


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>


tailwind breadcrumb v2

tailwind breadcrumb v2


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>
tailwind breadcrumb v3

tailwind breadcrumb v3

More Components


Tailwind CSS Badge 

Tailwind CSS Search

Tailwind CSS Pagination

Tailwind CSS Table 

Tailwind CSS Button

Tailwind CSS Modals

Tailwind CSS Avatar

Tailwind CSS loading Spinner

Tailwind CSS Progress Bar 

Tailwind CSS Alert Components 

Responsive Card Grid With Tailwind CSS

Tailwind CSS Dropdowns

Tailwind CSS Card

Tailwind CSS List Group

Tailwind CSS Breadcrumbs

Tailwind CSS Accordion (FAQ)

Tailwind CSS Responsive Image Gallery with Grid

Tailwind CSS Tabs