Home
Nick Girga
Elegant Animated Drawer

Elegant Animated Drawer

Useful Tailwind classes for constructing an animated sidebar drawer that can be controlled via labels. The component itself is pure CSS and does not require JavaScript to use (although this example uses a bit of JS).

This tailwind example is contributed by Nick Girga, on 05-May-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example is drawer

Sidebar

Author Nick Girga

872

Fork Fullscreen

<div class="flex flex-col items-center gap-8 my-16">
  <h1 id="fake-page-heading" class="text-4xl font-bold">Page 1</h1>
  <label for="my-drawer" class="btn">Open Drawer</label>
</div>

<div>
  
  <input id="my-drawer" type="checkbox" class="peer appearance-none" />

<label for="my-drawer" class="drawer-overlay"></label>

<div class="drawer-sidebar">

<label class="btn btn-drawer-sidebar"
      for="my-drawer"
      onclick="document.getElementById('fake-page-heading').innerHTML = 'Page 1';">
      Page 1
    </label>

<label class="btn btn-drawer-sidebar"
      for="my-drawer"
      onclick="document.getElementById('fake-page-heading').innerHTML = 'Page 2';">
      Page 2
    </label>

<label class="btn btn-drawer-sidebar"
      for="my-drawer"
      onclick="document.getElementById('fake-page-heading').innerHTML = 'Page 3';">
      Page 3
    </label>

</div>

Related Examples

Responsive navbar with dark mode support
Sidebar on small screen devices

Author:
Pardha Saradhy Madabhushi

1 year ago

2.6k
sidebar responsive
responsive sidebar with working links

Author:
Ganesh Salunke

4 weeks ago

153
Sidebar with only icons

Author:
Rajesh Maheshwari

11 months ago

2k
Elegant NavBar + Drawer
A NavBar, a responsive drawer/sidebar, and other useful Tailwind components to get started creating an app. Pure CSS, no JavaScript needed (although this example uses a bit of JS).

Author:
Nick Girga

8 months ago

1.3k
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.

Author:
Juan D. Cortorreal

2 months ago

168
Material 3 Drawer (Responsive) [Light]
A sidebar drawer that conforms to Google's Material 3 design guidelines. Static sidebar when the screen is >=lg. Collapses into a drawer when the screen is <lg.

Author:
Nick Girga

8 months ago

1.2k
Features Component

Author:
KULDEEP

7 months ago

1.1k
Sticky left sidebar

Author:
Lucas Martinez

2 years ago

15.3k
Tailwind Sidebar Layout (improved)
Improved Tailwind Sidebar Layout. - Responsive sidebar working - Close responsive sidebar working - Positioning menu-toggle correctly - Added some fresh icons - Added sub-items - showing on click - Added animation and swap on icons using 'peer'

Author:
Hielke Brandsma

1 year ago

3.4k
Basic sidebar

Author:
Rajesh Maheshwari

11 months ago

2k
Tailwind Sidebar Layout

Author:
nejaa badr

1 year ago

8.1k
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

Author:
Ameth Galarcio

1 year ago

3.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components