Published on

Ways To Build A App Sidebar With Tailwind CSS In 60 Minutes

Tags
NavigationsWidget
App Sidebar

As a FrontEnd technology blogger, it is important to stay up-to-date with the latest trends and tools. Tailwind CSS is one such tool that has gained popularity in recent times. In this article, we will explore how to build an App Sidebar with Tailwind CSS in just 60 minutes.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides a set of pre-defined classes to style your HTML elements. It allows you to create custom designs without writing any CSS code. Tailwind CSS is highly customizable, and you can configure it to match your design requirements.

The description of App Sidebar ui component

An App Sidebar is a user interface component that is commonly used in web applications. It provides a navigation menu that allows users to access different sections of the application. The App Sidebar usually appears on the left or right side of the screen and can be collapsed or expanded as per the user's preference.

Why use Tailwind CSS to create an App Sidebar ui component?

Tailwind CSS provides a set of pre-defined classes that can be used to create an App Sidebar quickly. You don't have to write any CSS code, which saves a lot of time. Tailwind CSS is highly customizable, and you can easily modify the styles to match your design requirements.

The preview of App Sidebar ui component

An App Sidebar typically consists of a header, a navigation menu, and a footer. The header usually contains the application logo and a button to toggle the visibility of the sidebar. The navigation menu contains links to different sections of the application. The footer can contain additional information or links.

Free download of the App Sidebar's source code

The source code of App Sidebar ui component

To create an App Sidebar with Tailwind CSS, you need to define the HTML structure and apply the Tailwind CSS classes to style the elements. The following code shows an example of an App Sidebar:

<div class="bg-gray-200">
  <div class="flex flex-col sm:flex-row sm:justify-around">
    <div class="h-screen w-64 bg-white">
      <div class="mt-10 flex items-center justify-center">
        <img
          class="h-6"
          src="https://premium-tailwindcomponents.netlify.app/assets/svg/tailwindcomponent-dark.svg"
        />
      </div>

      <nav class="mt-10">
        <a
          class="flex items-center border-r-4 border-gray-700 bg-gray-200 py-2 px-8 text-gray-700"
          href="#"
        >
          <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M19 11H5M19 11C20.1046 11 21 11.8954 21 13V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V13C3 11.8954 3.89543 11 5 11M19 11V9C19 7.89543 18.1046 7 17 7M5 11V9C5 7.89543 5.89543 7 7 7M7 7V5C7 3.89543 7.89543 3 9 3H15C16.1046 3 17 3.89543 17 5V7M7 7H17"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>

          <span class="mx-4 font-medium">Dashboard</span>
        </a>

        <a
          class="mt-5 flex items-center border-r-4 border-white py-2 px-8 text-gray-600 hover:border-gray-700 hover:bg-gray-200 hover:text-gray-700"
          href="#"
        >
          <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M16 7C16 9.20914 14.2091 11 12 11C9.79086 11 8 9.20914 8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7Z"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M12 14C8.13401 14 5 17.134 5 21H19C19 17.134 15.866 14 12 14Z"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>

          <span class="mx-4 font-medium">Accounts</span>
        </a>

        <a
          class="mt-5 flex items-center border-r-4 border-white py-2 px-8 text-gray-600 hover:border-gray-700 hover:bg-gray-200 hover:text-gray-700"
          href="#"
        >
          <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M15 5V7M15 11V13M15 17V19M5 5C3.89543 5 3 5.89543 3 7V10C4.10457 10 5 10.8954 5 12C5 13.1046 4.10457 14 3 14V17C3 18.1046 3.89543 19 5 19H19C20.1046 19 21 18.1046 21 17V14C19.8954 14 19 13.1046 19 12C19 10.8954 19.8954 10 21 10V7C21 5.89543 20.1046 5 19 5H5Z"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>

          <span class="mx-4 font-medium">Tickets</span>
        </a>

        <a
          class="mt-5 flex items-center border-r-4 border-white py-2 px-8 text-gray-600 hover:border-gray-700 hover:bg-gray-200 hover:text-gray-700"
          href="#"
        >
          <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M10.3246 4.31731C10.751 2.5609 13.249 2.5609 13.6754 4.31731C13.9508 5.45193 15.2507 5.99038 16.2478 5.38285C17.7913 4.44239 19.5576 6.2087 18.6172 7.75218C18.0096 8.74925 18.5481 10.0492 19.6827 10.3246C21.4391 10.751 21.4391 13.249 19.6827 13.6754C18.5481 13.9508 18.0096 15.2507 18.6172 16.2478C19.5576 17.7913 17.7913 19.5576 16.2478 18.6172C15.2507 18.0096 13.9508 18.5481 13.6754 19.6827C13.249 21.4391 10.751 21.4391 10.3246 19.6827C10.0492 18.5481 8.74926 18.0096 7.75219 18.6172C6.2087 19.5576 4.44239 17.7913 5.38285 16.2478C5.99038 15.2507 5.45193 13.9508 4.31731 13.6754C2.5609 13.249 2.5609 10.751 4.31731 10.3246C5.45193 10.0492 5.99037 8.74926 5.38285 7.75218C4.44239 6.2087 6.2087 4.44239 7.75219 5.38285C8.74926 5.99037 10.0492 5.45193 10.3246 4.31731Z"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>

          <span class="mx-4 font-medium">Settings</span>
        </a>
      </nav>

      <div class="absolute bottom-0 my-10">
        <a class="flex items-center py-2 px-8 text-gray-500 hover:text-gray-600" href="#">
          <svg class="h-5 w-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10ZM10 7C9.63113 7 9.3076 7.19922 9.13318 7.50073C8.85664 7.97879 8.24491 8.14215 7.76685 7.86561C7.28879 7.58906 7.12543 6.97733 7.40197 6.49927C7.91918 5.60518 8.88833 5 10 5C11.6569 5 13 6.34315 13 8C13 9.30622 12.1652 10.4175 11 10.8293V11C11 11.5523 10.5523 12 10 12C9.44773 12 9.00001 11.5523 9.00001 11V10C9.00001 9.44772 9.44773 9 10 9C10.5523 9 11 8.55228 11 8C11 7.44772 10.5523 7 10 7ZM10 15C10.5523 15 11 14.5523 11 14C11 13.4477 10.5523 13 10 13C9.44772 13 9 13.4477 9 14C9 14.5523 9.44772 15 10 15Z"
              fill="currentColor"
            />
          </svg>

          <span class="mx-4 font-medium">Support</span>
        </a>
      </div>
    </div>

    <div class="mt-8 h-screen w-64 bg-gray-800 sm:mt-0">
      <div class="mt-10 flex items-center justify-center">
        <img
          class="h-6"
          src="https://premium-tailwindcomponents.netlify.app/assets/svg/tailwindcomponent-light.svg"
        />
      </div>

      <nav class="mt-10">
        <a
          class="flex items-center border-r-4 border-gray-100 bg-gray-700 py-2 px-8 text-gray-100"
          href="#"
        >
          <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M19 11H5M19 11C20.1046 11 21 11.8954 21 13V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V13C3 11.8954 3.89543 11 5 11M19 11V9C19 7.89543 18.1046 7 17 7M5 11V9C5 7.89543 5.89543 7 7 7M7 7V5C7 3.89543 7.89543 3 9 3H15C16.1046 3 17 3.89543 17 5V7M7 7H17"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>

          <span class="mx-4 font-medium">Dashboard</span>
        </a>

        <a
          class="mt-5 flex items-center border-r-4 border-gray-800 py-2 px-8 text-gray-400 hover:border-gray-100 hover:bg-gray-700 hover:text-gray-100"
          href="#"
        >
          <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M16 7C16 9.20914 14.2091 11 12 11C9.79086 11 8 9.20914 8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7Z"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M12 14C8.13401 14 5 17.134 5 21H19C19 17.134 15.866 14 12 14Z"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>

          <span class="mx-4 font-medium">Accounts</span>
        </a>

        <a
          class="mt-5 flex items-center border-r-4 border-gray-800 py-2 px-8 text-gray-400 hover:border-gray-100 hover:bg-gray-700 hover:text-gray-100"
          href="#"
        >
          <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M15 5V7M15 11V13M15 17V19M5 5C3.89543 5 3 5.89543 3 7V10C4.10457 10 5 10.8954 5 12C5 13.1046 4.10457 14 3 14V17C3 18.1046 3.89543 19 5 19H19C20.1046 19 21 18.1046 21 17V14C19.8954 14 19 13.1046 19 12C19 10.8954 19.8954 10 21 10V7C21 5.89543 20.1046 5 19 5H5Z"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>

          <span class="mx-4 font-medium">Tickets</span>
        </a>

        <a
          class="mt-5 flex items-center border-r-4 border-gray-800 py-2 px-8 text-gray-400 hover:border-gray-100 hover:bg-gray-700 hover:text-gray-100"
          href="#"
        >
          <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M10.3246 4.31731C10.751 2.5609 13.249 2.5609 13.6754 4.31731C13.9508 5.45193 15.2507 5.99038 16.2478 5.38285C17.7913 4.44239 19.5576 6.2087 18.6172 7.75218C18.0096 8.74925 18.5481 10.0492 19.6827 10.3246C21.4391 10.751 21.4391 13.249 19.6827 13.6754C18.5481 13.9508 18.0096 15.2507 18.6172 16.2478C19.5576 17.7913 17.7913 19.5576 16.2478 18.6172C15.2507 18.0096 13.9508 18.5481 13.6754 19.6827C13.249 21.4391 10.751 21.4391 10.3246 19.6827C10.0492 18.5481 8.74926 18.0096 7.75219 18.6172C6.2087 19.5576 4.44239 17.7913 5.38285 16.2478C5.99038 15.2507 5.45193 13.9508 4.31731 13.6754C2.5609 13.249 2.5609 10.751 4.31731 10.3246C5.45193 10.0492 5.99037 8.74926 5.38285 7.75218C4.44239 6.2087 6.2087 4.44239 7.75219 5.38285C8.74926 5.99037 10.0492 5.45193 10.3246 4.31731Z"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>

          <span class="mx-4 font-medium">Settings</span>
        </a>
      </nav>

      <div class="absolute bottom-0 my-10">
        <a class="flex items-center py-2 px-8 text-gray-600 hover:text-gray-500" href="#">
          <svg class="h-5 w-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10ZM10 7C9.63113 7 9.3076 7.19922 9.13318 7.50073C8.85664 7.97879 8.24491 8.14215 7.76685 7.86561C7.28879 7.58906 7.12543 6.97733 7.40197 6.49927C7.91918 5.60518 8.88833 5 10 5C11.6569 5 13 6.34315 13 8C13 9.30622 12.1652 10.4175 11 10.8293V11C11 11.5523 10.5523 12 10 12C9.44773 12 9.00001 11.5523 9.00001 11V10C9.00001 9.44772 9.44773 9 10 9C10.5523 9 11 8.55228 11 8C11 7.44772 10.5523 7 10 7ZM10 15C10.5523 15 11 14.5523 11 14C11 13.4477 10.5523 13 10 13C9.44772 13 9 13.4477 9 14C9 14.5523 9.44772 15 10 15Z"
              fill="currentColor"
            />
          </svg>

          <span class="mx-4 font-medium">Support</span>
        </a>
      </div>
    </div>
  </div>
</div>

How to create an App Sidebar with Tailwind CSS?

To create an App Sidebar with Tailwind CSS, follow these steps:

Step 1: Define the HTML structure

Define the HTML structure for the App Sidebar. The following code shows an example of an App Sidebar HTML structure:

<div class="flex h-screen">
  <div class="w-64 bg-gray-800">
    <!-- Header -->
    <div class="flex items-center justify-between px-4 py-3 bg-gray-900">
      <div class="text-white font-bold">My App</div>
      <button class="text-gray-500 hover:text-white focus:outline-none focus:text-white">
        <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24">
          <path
            x-show="!showMenu"
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M4 6h16v2H4V6zm0 5h16v2H4v-2zm0 5h16v2H4v-2z"
          />
          <path
            x-show="showMenu"
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M4 6h16v2H4V6zm0 5h16v2H4v-2zm0 5h16v2H4v-2z"
          />
        </svg>
      </button>
    </div>
    <!-- Navigation menu -->
    <nav class="flex-1 bg-gray-900 px-2 py-4">
      <a href="#" class="block px-2 py-1 text-white font-semibold rounded hover:bg-gray-800">Dashboard</a>
      <a href="#" class="block px-2 py-1 text-white font-semibold rounded hover:bg-gray-800">Projects</a>
      <a href="#" class="block px-2 py-1 text-white font-semibold rounded hover:bg-gray-800">Team</a>
      <a href="#" class="block px-2 py-1 text-white font-semibold rounded hover:bg-gray-800">Settings</a>
      <a href="#" class="block px-2 py-1 text-white font-semibold rounded hover:bg-gray-800">Logout</a>
    </nav>
    <!-- Footer -->
    <div class="px-4 py-3 bg-gray-900">
      <span class="text-white">Version 1.0</span>
    </div>
  </div>
  <div class="flex-1 bg-gray-100"></div>
</div>

Step 2: Apply Tailwind CSS classes

Apply the Tailwind CSS classes to style the elements. The following code shows an example of applying Tailwind CSS classes to the App Sidebar HTML structure:

<div class="flex h-screen">
  <div class="w-64 bg-gray-800">
    <!-- Header -->
    <div class="flex items-center justify-between px-4 py-3 bg-gray-900">
      <div class="text-white font-bold">My App</div>
      <button class="text-gray-500 hover:text-white focus:outline-none focus:text-white">
        <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24">
          <path
            x-show="!showMenu"
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M4 6h16v2H4V6zm0 5h16v2H4v-2zm0 5h16v2H4v-2z"
          />
          <path
            x-show="showMenu"
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M4 6h16v2H4V6zm0 5h16v2H4v-2zm0 5h16v2H4v-2z"
          />
        </svg>
      </button>
    </div>
    <!-- Navigation menu -->
    <nav class="flex-1 bg-gray-900 px-2 py-4">
      <a href="#" class="block px-2 py-1 text-white font-semibold rounded hover:bg-gray-800">Dashboard</a>
      <a href="#" class="block px-2 py-1 text-white font-semibold rounded hover:bg-gray-800">Projects</a>
      <a href="#" class="block px-2 py-1 text-white font-semibold rounded hover:bg-gray-800">Team</a>
      <a href="#" class="block px-2 py-1 text-white font-semibold rounded hover:bg-gray-800">Settings</a>
      <a href="#" class="block px-2 py-1 text-white font-semibold rounded hover:bg-gray-800">Logout</a>
    </nav>
    <!-- Footer -->
    <div class="px-4 py-3 bg-gray-900">
      <span class="text-white">Version 1.0</span>
    </div>
  </div>
  <div class="flex-1 bg-gray-100"></div>
</div>

Step 3: Add JavaScript functionality

Add JavaScript functionality to toggle the visibility of the App Sidebar. The following code shows an example of using JavaScript to toggle the visibility of the App Sidebar:

const button = document.querySelector('button');
const nav = document.querySelector('nav');

button.addEventListener('click', () => {
  nav.classList.toggle('hidden');
});

Conclusion

In this article, we have explored how to build an App Sidebar with Tailwind CSS in just 60 minutes. Tailwind CSS provides a set of pre-defined classes that can be used to create custom designs without writing any CSS code. With Tailwind CSS, you can easily create an App Sidebar that matches your design requirements.