Published on

Here Are 6 Ways To Create A Simple Navigation With Tailwind CSS

Tags
Navigations
Simple Navigation

As a FrontEnd technology blogger, I am always looking for ways to improve my UI design skills. One tool that has been gaining popularity lately is Tailwind CSS. In this article, we will explore how to create a Simple Navigation UI component using Tailwind CSS.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that allows you to quickly build custom designs without writing any CSS. It provides a set of pre-defined classes that you can use to style your HTML elements. Tailwind CSS is highly customizable and can be used with any JavaScript framework or library.

The description of Simple Navigation UI component

A Simple Navigation UI component is a horizontal menu bar that allows users to navigate between different sections of a website. It typically appears at the top of the page and contains links to the most important pages or sections of the website.

Why use Tailwind CSS to create a Simple Navigation UI component?

Tailwind CSS provides a set of pre-defined classes that make it easy to create a Simple Navigation UI component. You don't need to write any CSS, which saves you time and effort. Additionally, Tailwind CSS is highly customizable, so you can easily adjust the styles to match your website's design.

The preview of Simple Navigation UI component

To create a Simple Navigation UI component, we will use the following classes:

  • flex: This class makes the navigation bar a flex container.
  • justify-between: This class evenly distributes the navigation items across the container.
  • items-center: This class centers the navigation items vertically.
  • text-gray-600: This class sets the color of the navigation items to gray.

Free download of the Simple Navigation's source code

The source code of Simple Navigation UI component

To create a Simple Navigation UI component, we will use the following HTML code:

<nav class="flex justify-between items-center bg-gray-100 p-6">
  <div class="text-gray-600 font-bold">Logo</div>
  <div class="flex">
    <a href="#" class="text-gray-600 mx-4">Home</a>
    <a href="#" class="text-gray-600 mx-4">About</a>
    <a href="#" class="text-gray-600 mx-4">Contact</a>
  </div>
</nav>

To style the navigation bar, we will use the following Tailwind CSS code:

.bg-gray-100 {
  background-color: #f7fafc;
}

.text-gray-600 {
  color: #718096;
}

.font-bold {
  font-weight: 700;
}

.p-6 {
  padding: 1.5rem;
}

.mx-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}

<div class="my-auto mx-auto">
      <ul>
        <li>
          <button class="p-2 flex">
            <span class="my-auto bg-indigo-400 h-4 w-1"></span>
            <div class="inline-flex rounded-r-xl pr-2 hover:bg-gray-200">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
                fill="currentColor"
                class="mx-2 my-auto"
                viewBox="0 0 16 16"
              >
                <path
                  d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"
                />
              </svg>
              Public Profile
            </div>
          </button>
        </li>
        <li>
          <button class="p-2 flex">
            <span class="hidden my-auto bg-indigo-400 h-4 w-1"></span>
            <div class="inline-flex rounded-r-xl pr-2 hover:bg-gray-200">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
                fill="currentColor"
                class="mx-2 my-auto"
                viewBox="0 0 16 16"
              >
                <path
                  d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z"
                />
                <path
                  d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z"
                />
              </svg>
              Account
            </div>
          </button>
        </li>
        <li>
          <button class="p-2 flex">
            <span class="hidden my-auto bg-indigo-400 h-4 w-1"></span>
            <div class="inline-flex rounded-r-xl pr-2 hover:bg-gray-200">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
                fill="currentColor"
                class="mx-2 my-auto"
                viewBox="0 0 16 16"
              >
                <path
                  d="M15.825.12a.5.5 0 0 1 .132.584c-1.53 3.43-4.743 8.17-7.095 10.64a6.067 6.067 0 0 1-2.373 1.534c-.018.227-.06.538-.16.868-.201.659-.667 1.479-1.708 1.74a8.118 8.118 0 0 1-3.078.132 3.659 3.659 0 0 1-.562-.135 1.382 1.382 0 0 1-.466-.247.714.714 0 0 1-.204-.288.622.622 0 0 1 .004-.443c.095-.245.316-.38.461-.452.394-.197.625-.453.867-.826.095-.144.184-.297.287-.472l.117-.198c.151-.255.326-.54.546-.848.528-.739 1.201-.925 1.746-.896.126.007.243.025.348.048.062-.172.142-.38.238-.608.261-.619.658-1.419 1.187-2.069 2.176-2.67 6.18-6.206 9.117-8.104a.5.5 0 0 1 .596.04zM4.705 11.912a1.23 1.23 0 0 0-.419-.1c-.246-.013-.573.05-.879.479-.197.275-.355.532-.5.777l-.105.177c-.106.181-.213.362-.32.528a3.39 3.39 0 0 1-.76.861c.69.112 1.736.111 2.657-.12.559-.139.843-.569.993-1.06a3.122 3.122 0 0 0 .126-.75l-.793-.792zm1.44.026c.12-.04.277-.1.458-.183a5.068 5.068 0 0 0 1.535-1.1c1.9-1.996 4.412-5.57 6.052-8.631-2.59 1.927-5.566 4.66-7.302 6.792-.442.543-.795 1.243-1.042 1.826-.121.288-.214.54-.275.72v.001l.575.575zm-4.973 3.04.007-.005a.031.031 0 0 1-.007.004zm3.582-3.043.002.001h-.002z"
                />
              </svg>
              Appearance
            </div>
          </button>
        </li>
      </ul>
    </div>

How to create a Simple Navigation UI component with Tailwind CSS?

Now that we have the HTML and CSS code, let's break down the steps to create a Simple Navigation UI component with Tailwind CSS.

Step 1: Set up your HTML structure

First, we need to set up the HTML structure for our Simple Navigation UI component. We will use the nav element to create the navigation bar and the a element to create the navigation items.

<nav class="flex justify-between items-center bg-gray-100 p-6">
  <div class="text-gray-600 font-bold">Logo</div>
  <div class="flex">
    <a href="#" class="text-gray-600 mx-4">Home</a>
    <a href="#" class="text-gray-600 mx-4">About</a>
    <a href="#" class="text-gray-600 mx-4">Contact</a>
  </div>
</nav>

Step 2: Style the navigation bar

Next, we need to style the navigation bar using Tailwind CSS classes. We will use the bg-gray-100 class to set the background color of the navigation bar to gray, the p-6 class to set the padding to 1.5rem, and the flex, justify-between, and items-center classes to center the navigation items.

.bg-gray-100 {
  background-color: #f7fafc;
}

.p-6 {
  padding: 1.5rem;
}

Step 3: Style the navigation items

Finally, we need to style the navigation items using Tailwind CSS classes. We will use the text-gray-600 class to set the color of the navigation items to gray and the mx-4 class to add margin to the left and right of each navigation item.

.text-gray-600 {
  color: #718096;
}

.mx-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}

Conclusion

In this article, we explored how to create a Simple Navigation UI component using Tailwind CSS. We learned that Tailwind CSS provides a set of pre-defined classes that make it easy to create custom designs without writing any CSS. We also learned that Tailwind CSS is highly customizable, so you can easily adjust the styles to match your website's design. By following the steps outlined in this article, you can create a Simple Navigation UI component that is both functional and visually appealing.