sidebar

This tailwind example is contributed by aditya_sharma, on 30-Jul-2026. Component is made with Tailwind v3.4. It is responsive. similar terms for this example is drawer

Sidebar

Author aditya_sharma

Tailwind v3.4 217

Fork Fullscreen

<div>
        <h1 class="text-lg font-bold"> Heading</h1>
        <p class="text-sm text-gray-400">Admin Portal</p>
      </div>
    </div>
  </div>

<nav class="flex-1 p-4 space-y-2">
    
    <a
      routerLink="/admin/dashboard"
      routerLinkActive="bg-blue-600 text-white"
      class="flex items-center gap-3 px-4 py-3 rounded-xl text-gray-300 hover:bg-gray-800 hover:text-white transition-all duration-200"
    >
      <span class="font-medium">Dashboard</span>
    </a>

<a
      routerLink="/admin/createSessions"
      routerLinkActive="bg-blue-600 text-white"
      class="flex items-center gap-3 px-4 py-3 rounded-xl text-gray-300 hover:bg-gray-800 hover:text-white transition-all duration-200"
    >
      <span class="font-medium">Create </span>
    </a>

<a
      routerLink="/admin/assignments"
      routerLinkActive="bg-blue-600 text-white"
      class="flex items-center gap-3 px-4 py-3 rounded-xl text-gray-300 hover:bg-gray-800 hover:text-white transition-all duration-200"
    >
      <span class="font-medium">Assign</span>
    </a>
  </nav>

<div class="p-4 border-t border-gray-800">
    <button (click)="logoutAdmin()" class=" text-center flex gap-3 p-3 rounded-xl bg-gray-900">
      Logout
    </button>
  </div>
</aside>

Related Examples

Sidebar
This is the sidebar that I use in my projects, I use grid to be able to manage the space issue a little better, it seems like a clean and modern design, it is more than anything for the dashboards that you want to create

Ameth Galarcio

1 year ago

4.6k
Tailwind Sidebar Layout

Junior Gauze

1 year ago

2.5k
Table Content
Dashboard Table Content, with Sidebar Reusable for any window

Ameth Galarcio

1 year ago

2.9k
Animated Drawer
Collapsible sidebar navigation that allows users to access additional menu options. It is designed for efficient space utilization and can be easily expanded and collapsed.

Eamon Carter

2 years ago

28.9k
Ticket
Sirve para ticket

ANGEL EMILIANO MARQUEZ VAZQUEZ

1 year ago

2.4k
FinTech Banking Navbar with Trust Bar & Mobile Sidebar
A clean, enterprise-grade banking navigation bar built with pure HTML and Tailwind CSS. It features a trust announcement bar, responsive navigation, loan dropdown, secure call-to-action buttons, and a mobile sidebar. Perfect for fintech platforms, digital banks, insurance providers, investment firms, lending platforms, and financial service websites.

JUGENDRA GANGWAR

3 months ago

324
Responsive eCommerce Sidebar Layout with Hamburger Menu | Tailwind CSS UI for Online Stores
Build a clean and responsive eCommerce sidebar layout with a smooth hamburger menu using Tailwind CSS and Alpine.js. Ideal for devotional, spiritual, or modern online stores. Includes dark mode support, navigation links, cart, login, and a dynamic layout for beautiful product pages.

Rajesh Pandey

1 year ago

1.5k
Sticky sidebar menu for big screens

Prajwal Hallale

3 years ago

13k
Startup Glassmorphism Navbar with Neon Gradient & Floating Navigation
AI startup navbar built with pure HTML and Tailwind CSS.

JUGENDRA GANGWAR

3 months ago

316
gallary
html , css

Hacker Development

1 year ago

1.6k
Sidebar Off canvas
How it Works: Off-Canvas Sidebar Component This component uses HTML5, Tailwind CSS, and Vanilla JavaScript to create a smooth, performant sidebar navigation. The Trigger Mechanism: The Menu Button uses an onclick="toggleSidebar()" event to trigger the opening sequence. We use a semantic <button> tag for accessibility. The UI Structure (HTML & Tailwind): Overlay (#sidebar-overlay): A fixed inset-0 div covers the entire screen with a semi-transparent black background (bg-black/50). It starts hidden and transparent (opacity-0 hidden) to prevent interaction when closed. Sidebar Panel (#sidebar-panel): Positioned with fixed top-0 left-0 h-full, it occupies the full height of the screen. Animation State: We use transform -translate-x-full to hide the panel completely off-screen to the left by default. The transition-transform duration-300 class ensures the sliding movement is smooth. The Logic (JavaScript): The toggleSidebar() function handles the state: Opening: It removes the -translate-x-full class (sliding the panel into view) and removes hidden/opacity-0 from the overlay (fading it in). Closing: It adds the classes back to reverse the animation. Crucially, it uses setTimeout(..., 300) when closing. This delays the hidden class application by 300ms, allowing the CSS fade-out animation to complete fully before the element is removed from the flow. Flexbox Layout: The panel uses flex flex-col to vertically stack the Header, Content, and Footer. The middle section has flex-1 overflow-y-auto, ensuring that if the menu items exceed the screen height, only that area scrolls while the header and footer stay pinned.

Juan D. Cortorreal

10 months ago

959
Material 3 Drawer [Light]
A sidebar drawer that conforms to Google's Material 3 design guidelines

Nick Girga

1 year ago

1.1k