Tailwind Breadcrumb style example

tailwind

Here is an example of a breadcrumb styled using Tailwind CSS classes:


<nav class="flex items-center">
    <a href="#" class="text-gray-700 font-bold">Home</a>
    <svg class="fill-current w-3 h-3 mx-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
        <path
            d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"/>
    </svg>
    <a href="#" class="text-gray-700 font-bold">Breadcrumb</a>
</nav>

In this example, the flex class makes the breadcrumb a flex container, the items-center class aligns the items horizontally in the center of the container, the text-gray-700 class adds a dark gray color to the links, the font-bold class makes the links text bold, the mx-3 class adds margin to the left and right of the separator, the fill-current class sets the current fill color of the SVG to the current text color, the w-3 and h-3 classes set the width and height of the SVG to 3 pixels, and the viewBox attribute of the SVG specifies the coordinate system of the SVG.

You can customize this breadcrumb by modifying the classes used or by adding additional classes as needed. For example, you can use the text-xl class to make the links text larger, or the bg-gray-300 class to set the background color of the breadcrumb to a light gray.