- Published on
6 Ideas To Help You Make A App Sidebar With Sub-navigation With Tailwind CSS Like A Pro
- What is Tailwind CSS?
- The description of App Sidebar with sub-navigation ui component
- Why use Tailwind CSS to create a App Sidebar with sub-navigation ui component?
- The preview of App Sidebar with sub-navigation ui component
- The source code of App Sidebar with sub-navigation ui component
- How to create a App Sidebar with sub-navigation with Tailwind CSS?
- Conclusion
As a FrontEnd technology blogger, Tailwind CSS is a must-know tool for creating beautiful and responsive user interfaces. In this article, we will explore how to create an App Sidebar with sub-navigation ui component using Tailwind CSS. We will discuss why Tailwind CSS is the perfect tool for this task, provide a preview of the component, and share the source code. We will also provide step-by-step instructions on how to create this component.
What is Tailwind CSS?
Tailwind CSS is a utility-first CSS framework that provides a set of pre-defined classes that can be used to style HTML elements. Unlike other CSS frameworks, Tailwind CSS does not provide pre-designed components. Instead, it provides a set of utility classes that can be used to create custom components. This approach gives developers more flexibility and control over the design of their application.
The description of App Sidebar with sub-navigation ui component
An App Sidebar with sub-navigation ui component is a user interface element that is commonly used in web applications. It consists of a vertical sidebar that contains navigation links to different sections of the application. When a user clicks on a link, a sub-navigation menu appears that allows the user to navigate to different pages within that section.
Why use Tailwind CSS to create a App Sidebar with sub-navigation ui component?
Tailwind CSS is the perfect tool for creating an App Sidebar with sub-navigation ui component because it provides a set of utility classes that can be used to style the component. These classes can be used to create responsive layouts, apply custom colors, and add animations to the component. Additionally, Tailwind CSS provides a set of pre-defined breakpoints that can be used to create responsive designs that work on different screen sizes.
The preview of App Sidebar with sub-navigation ui component
To create an App Sidebar with sub-navigation ui component, we will use Tailwind CSS to style the component. The component will consist of a vertical sidebar that contains navigation links to different sections of the application. When a user clicks on a link, a sub-navigation menu will appear that allows the user to navigate to different pages within that section.
Free download of the App Sidebar with sub-navigation's source code
The source code of App Sidebar with sub-navigation ui component
To create an App Sidebar with sub-navigation ui component, we will use HTML and Tailwind CSS. The HTML will define the structure of the component, and the Tailwind CSS classes will be used to style the component.
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
<div class="bg-gray-200 font-sans">
<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">
<div x-data="{ open: false }">
<button
@click="open = !open"
class="flex w-full cursor-pointer items-center justify-between py-3 px-6 text-gray-600 hover:bg-gray-100 hover:text-gray-700 focus:outline-none"
>
<span class="flex items-center">
<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"
></path>
</svg>
<span class="mx-4 font-medium">Dashboard</span>
</span>
<span>
<svg
class="h-4 w-4"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
x-show="! open"
d="M9 5L16 12L9 19"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
style="display: none;"
></path>
<path
x-show="open"
d="M19 9L12 16L5 9"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
></path>
</svg>
</span>
</button>
<div x-show="open" class="bg-gray-100">
<a
class="block py-2 px-16 text-sm text-gray-600 hover:bg-blue-500 hover:text-white"
href="#"
>Manage Accounts</a
>
<a
class="block py-2 px-16 text-sm text-gray-600 hover:bg-blue-500 hover:text-white"
href="#"
>Manage Tickets</a
>
</div>
</div>
<div x-data="{ open: false }">
<button
@click="open = !open"
class="flex w-full cursor-pointer items-center justify-between py-3 px-6 text-gray-600 hover:bg-gray-100 hover:text-gray-700 focus:outline-none"
>
<span class="flex items-center">
<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>
<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"
></path>
</svg>
<span class="mx-4 font-medium">Accounts</span>
</span>
<span>
<svg
class="h-4 w-4"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
x-show="! open"
d="M9 5L16 12L9 19"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
style="display: none;"
></path>
<path
x-show="open"
d="M19 9L12 16L5 9"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
></path>
</svg>
</span>
</button>
<div x-show="open" class="bg-gray-100">
<a
class="block py-2 px-16 text-sm text-gray-600 hover:bg-blue-500 hover:text-white"
href="#"
>All Accounts</a
>
<a
class="block py-2 px-16 text-sm text-gray-600 hover:bg-blue-500 hover:text-white"
href="#"
>Create Account</a
>
<a
class="block py-2 px-16 text-sm text-gray-600 hover:bg-blue-500 hover:text-white"
href="#"
>Accounts Roles</a
>
</div>
</div>
<div x-data="{ open: false }">
<button
@click="open = !open"
class="flex w-full cursor-pointer items-center justify-between py-3 px-6 text-gray-600 hover:bg-gray-100 hover:text-gray-700 focus:outline-none"
>
<span class="flex items-center">
<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"
></path>
</svg>
<span class="mx-4 font-medium">Tickets</span>
</span>
<span>
<svg
class="h-4 w-4"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
x-show="! open"
d="M9 5L16 12L9 19"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
style="display: none;"
></path>
<path
x-show="open"
d="M19 9L12 16L5 9"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
></path>
</svg>
</span>
</button>
<div x-show="open" class="bg-gray-100">
<a
class="block py-2 px-16 text-sm text-gray-600 hover:bg-blue-500 hover:text-white"
href="#"
>All Tickets</a
>
<a
class="block py-2 px-16 text-sm text-gray-600 hover:bg-blue-500 hover:text-white"
href="#"
>Create Ticket</a
>
</div>
</div>
</nav>
<div class="absolute bottom-0 my-8">
<a class="flex items-center py-2 px-8 text-gray-700 hover:text-gray-600" href="#">
<img
class="mr-3 h-6 w-6 rounded-full object-cover"
src="https://lh3.googleusercontent.com/a-/AOh14Gi0DgItGDTATTFV6lPiVrqtja6RZ_qrY91zg42o-g"
alt="avatar"
/>
<span>Khatabwedaa</span>
</a>
</div>
</div>
<div class="h-screen w-64 bg-gray-800">
<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">
<div x-data="{ open: false }">
<button
@click="open = !open"
class="flex w-full cursor-pointer items-center justify-between py-3 px-6 text-gray-100 hover:bg-gray-700 hover:text-gray-100 focus:outline-none"
>
<span class="flex items-center">
<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"
></path>
</svg>
<span class="mx-4 font-medium">Dashboard</span>
</span>
<span>
<svg
class="h-4 w-4"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
x-show="! open"
d="M9 5L16 12L9 19"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
style="display: none;"
></path>
<path
x-show="open"
d="M19 9L12 16L5 9"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
></path>
</svg>
</span>
</button>
<div x-show="open" class="bg-gray-700">
<a
class="block py-2 px-16 text-sm text-gray-100 hover:bg-blue-500 hover:text-white"
href="#"
>Manage Accounts</a
>
<a
class="block py-2 px-16 text-sm text-gray-100 hover:bg-blue-500 hover:text-white"
href="#"
>Manage Tickets</a
>
</div>
</div>
<div x-data="{ open: false }">
<button
@click="open = !open"
class="flex w-full cursor-pointer items-center justify-between py-3 px-6 text-gray-100 hover:bg-gray-700 hover:text-gray-100 focus:outline-none"
>
<span class="flex items-center">
<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>
<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"
></path>
</svg>
<span class="mx-4 font-medium">Accounts</span>
</span>
<span>
<svg
class="h-4 w-4"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
x-show="! open"
d="M9 5L16 12L9 19"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
style="display: none;"
></path>
<path
x-show="open"
d="M19 9L12 16L5 9"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
></path>
</svg>
</span>
</button>
<div x-show="open" class="bg-gray-700">
<a
class="block py-2 px-16 text-sm text-gray-100 hover:bg-blue-500 hover:text-white"
href="#"
>All Accounts</a
>
<a
class="block py-2 px-16 text-sm text-gray-100 hover:bg-blue-500 hover:text-white"
href="#"
>Create Account</a
>
<a
class="block py-2 px-16 text-sm text-gray-100 hover:bg-blue-500 hover:text-white"
href="#"
>Accounts Roles</a
>
</div>
</div>
<div x-data="{ open: false }">
<button
@click="open = !open"
class="flex w-full cursor-pointer items-center justify-between py-3 px-6 text-gray-100 hover:bg-gray-700 hover:text-gray-100 focus:outline-none"
>
<span class="flex items-center">
<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"
></path>
</svg>
<span class="mx-4 font-medium">Tickets</span>
</span>
<span>
<svg
class="h-4 w-4"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
x-show="! open"
d="M9 5L16 12L9 19"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
style="display: none;"
></path>
<path
x-show="open"
d="M19 9L12 16L5 9"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
></path>
</svg>
</span>
</button>
<div x-show="open" class="bg-gray-700">
<a
class="block py-2 px-16 text-sm text-gray-100 hover:bg-blue-500 hover:text-white"
href="#"
>All Tickets</a
>
<a
class="block py-2 px-16 text-sm text-gray-100 hover:bg-blue-500 hover:text-white"
href="#"
>Create Ticket</a
>
</div>
</div>
</nav>
<div class="absolute bottom-0 my-8">
<a class="flex items-center py-2 px-8 text-gray-100 hover:text-gray-200" href="#">
<img
class="mr-3 h-6 w-6 rounded-full object-cover"
src="https://lh3.googleusercontent.com/a-/AOh14Gi0DgItGDTATTFV6lPiVrqtja6RZ_qrY91zg42o-g"
alt="avatar"
/>
<span>Khatabwedaa</span>
</a>
</div>
</div>
</div>
</div>
How to create a App Sidebar with sub-navigation with Tailwind CSS?
To create an App Sidebar with sub-navigation with Tailwind CSS, follow these steps:
Create the HTML structure for the component. The component will consist of a vertical sidebar that contains navigation links to different sections of the application. When a user clicks on a link, a sub-navigation menu will appear that allows the user to navigate to different pages within that section.
Add the Tailwind CSS classes to style the component. Use the utility classes provided by Tailwind CSS to style the component. Use the responsive classes to create a design that works on different screen sizes.
Add JavaScript to handle the click event. When a user clicks on a link, a sub-navigation menu should appear. Use JavaScript to toggle the visibility of the sub-navigation menu.
Conclusion
In this article, we discussed how to create an App Sidebar with sub-navigation ui component using Tailwind CSS. We explored why Tailwind CSS is the perfect tool for this task, provided a preview of the component, and shared the source code. We also provided step-by-step instructions on how to create this component. With these ideas, you can create beautiful and responsive App Sidebar with sub-navigation ui components like a pro.