Published on

Beginners Guide: Make A Breadcrumbs With Tailwind CSS

Tags
NavigationsPagesWidget
Breadcrumbs

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides a set of pre-defined classes to build your user interface. Unlike other CSS frameworks, Tailwind CSS does not come with pre-designed components. Instead, it provides a set of low-level utility classes that can be combined to create custom designs.

The description of Breadcrumbs UI component

Breadcrumbs are a type of navigation that shows the user's current location within a website or application. They typically appear at the top of the page and show the user the path they have taken to get to the current page. Breadcrumbs are an essential part of any website or application that has a hierarchical structure.

Why use Tailwind CSS to create a Breadcrumbs UI component?

Tailwind CSS's utility-first approach makes it easy to create custom designs quickly. By combining pre-defined classes, you can create complex layouts without writing any custom CSS. This approach is perfect for creating breadcrumbs, which require a lot of layout and positioning.

The preview of Breadcrumbs UI component

Breadcrumbs typically appear at the top of the page and show the user's current location within the website or application. They are usually displayed as a horizontal list of links, with a separator between each link.

Free download of the Breadcrumbs's source code

The source code of Breadcrumbs UI component

To create breadcrumbs with Tailwind CSS, you will need to use a combination of utility classes to style the links and separators. You can use the flex and items-center classes to create a horizontal list of links, and the mr-2 class to add space between each link.

<div class="h-screen flex justify-center items-center">
  <div class="flex items-center py-4 overflow-y-auto whitespace-nowrap">
    <a href="#" class="text-gray-600 dark:text-gray-200">
      <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
        <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
      </svg>
    </a>

    <span class="mx-5 text-gray-500 dark:text-gray-300">
      <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
      </svg>
    </span>

    <a href="#" class="text-gray-600 dark:text-gray-200 hover:underline"> Account </a>

    <span class="mx-5 text-gray-500 dark:text-gray-300">
      <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
      </svg>
    </span>

    <a href="#" class="text-gray-600 dark:text-gray-200 hover:underline"> Profile </a>

    <span class="mx-5 text-gray-500 dark:text-gray-300">
      <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
      </svg>
    </span>

    <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline"> Settings </a>
  </div>
</div>

How to create a Breadcrumbs with Tailwind CSS?

To create a breadcrumbs UI component with Tailwind CSS, follow these steps:

Step 1: Create the HTML markup

Start by creating the HTML markup for the breadcrumbs. You will need to create an ordered list (<ol>) and add a list item (<li>) for each link in the breadcrumbs.

<ol class="flex items-center">
  <li><a href="#">Home</a></li>
  <li><span class="mx-2">/</span></li>
  <li><a href="#">Category</a></li>
  <li><span class="mx-2">/</span></li>
  <li><a href="#">Product</a></li>
</ol>

In this example, we have created a breadcrumbs list with three links: Home, Category, and Product. We have used the mx-2 class to add a separator between each link.

Step 2: Style the breadcrumbs with Tailwind CSS

Next, we will use Tailwind CSS to style the breadcrumbs. We will use the text-gray-500 class to make the links gray, and the hover:text-gray-700 class to change the link color on hover. We will also use the font-medium class to make the links bold.

<ol class="flex items-center">
  <li><a href="#" class="text-gray-500 hover:text-gray-700 font-medium">Home</a></li>
  <li><span class="mx-2 text-gray-500">/</span></li>
  <li><a href="#" class="text-gray-500 hover:text-gray-700 font-medium">Category</a></li>
  <li><span class="mx-2 text-gray-500">/</span></li>
  <li><a href="#" class="text-gray-500 hover:text-gray-700 font-medium">Product</a></li>
</ol>

Step 3: Add responsive behavior

Finally, we will add responsive behavior to the breadcrumbs. We will use the text-sm class to make the font size smaller on smaller screens, and the text-base class to make the font size larger on larger screens.

<ol class="flex items-center text-sm sm:text-base">
  <li><a href="#" class="text-gray-500 hover:text-gray-700 font-medium">Home</a></li>
  <li><span class="mx-2 text-gray-500">/</span></li>
  <li><a href="#" class="text-gray-500 hover:text-gray-700 font-medium">Category</a></li>
  <li><span class="mx-2 text-gray-500">/</span></li>
  <li><a href="#" class="text-gray-500 hover:text-gray-700 font-medium">Product</a></li>
</ol>

In this example, we have used the text-sm class to make the font size smaller on smaller screens and the sm:text-base class to make the font size larger on larger screens.

Conclusion

Breadcrumbs are an essential part of any website or application that has a hierarchical structure. With Tailwind CSS, you can create custom breadcrumbs quickly and easily using pre-defined utility classes. By following the steps outlined in this article, you can create breadcrumbs that are both functional and beautiful.