Elegant Animated Drawer (Responsive)

Forked from @nickgirga/elegant-sidebar-drawer

A static sidebar when the screen is >=lg. It collapses into a drawer when the screen is <lg. Still requires no JavaScript to function (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 v3.4. It is responsive. It supports dark mode. similar terms for this example is drawer

Sidebar

Author Nick Girga

Tailwind v3.4 2.3k

Fork Fullscreen

<div class="flex flex-col items-center gap-8 my-16 lg:ml-64">
  <h1 id="fake-page-heading" class="text-4xl font-bold">Page 1</h1>
  <label for="my-drawer" class="btn lg:hidden">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 lg:drawer-sidebar-open">

<div>
      
      <label class="btn btn-drawer-sidebar block lg:hidden"
        for="my-drawer"
        onclick="document.getElementById('fake-page-heading').innerHTML = 'Page 1';">
        Page 1
      </label>
      
      <button class="btn btn-drawer-sidebar lg:block w-full hidden"
        onclick="document.getElementById('fake-page-heading').innerHTML = 'Page 1';">
        Page 1
      </button>
    </div>

<div>
      
      <label class="btn btn-drawer-sidebar block lg:hidden"
        for="my-drawer"
        onclick="document.getElementById('fake-page-heading').innerHTML = 'Page 2';">
        Page 2
      </label>
      
      <button class="btn btn-drawer-sidebar lg:block w-full hidden"
        onclick="document.getElementById('fake-page-heading').innerHTML = 'Page 2';">
        Page 2
      </button>
    </div>

<div>
      
      <label class="btn btn-drawer-sidebar block lg:hidden"
        for="my-drawer"
        onclick="document.getElementById('fake-page-heading').innerHTML = 'Page 3';">
        Page 3
      </label>
      
      <button class="btn btn-drawer-sidebar lg:block w-full hidden"
        onclick="document.getElementById('fake-page-heading').innerHTML = 'Page 3';">
        Page 3
      </button>
    </div>

</div>

Related Examples

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

3 years ago

29.1k
Responsive navbar with alpinejs
A mix of Penguin navbar with PineUI Slide-Over

Muhammad Rizqi Juniyanto

2 years ago

3.9k
Sidebar with only icons

Rajesh Maheshwari

1 year ago

2.9k
sidebar
This sidebar implementation includes: 1. Responsive design that works on both desktop and mobile 2. Indigo-800 and Blue-900 color scheme for the background 3. Dark mode support 4. Beautiful animations and effects: 1. Slide-in animation when opening the sidebar 2. Fade-in animation for menu items with staggered delays 3. Hover effects on menu items with underline animation 4. Smooth color transitions 5. SVG icons for menu items 6. User profile section at the bottom of the sidebar 7. Close button for easy dismissal on mobile 8. Main content area with a toggle button for the sidebar 9. Accessibility considerations (proper heading structure, color contrast, focus styles) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The sidebar has a white background in light mode and dark gray in dark mode - Text colors are adjusted for readability in both light and dark modes - Menu items have hover effects with background color changes and underline animations - Icons change color on hover - The sidebar slides in from the left with a smooth animation - Menu items fade in with a staggered delay for a smooth entrance - Dark mode is automatically applied based on system preferences - The layout is responsive, with the sidebar hiding off-screen on mobile and a toggle button to show/hide it This implementation provides a visually appealing and functional sidebar with various animations and effects, using HTML, Tailwind CSS, and vanilla JavaScript for the interactions.

nejaa badr

2 years ago

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

Nick Girga

1 year ago

1.6k
Creative Agency Navbar with Fullscreen Mobile Menu & Animated CTA
A bold, editorial-style navigation bar designed for creative agencies, design studios, architecture firms, and portfolio websites. Built with pure HTML and Tailwind CSS, it features a minimalist branding system, fullscreen mobile navigation, animated call-to-action button, responsive layout, and modern typography inspired by premium digital agencies.

JUGENDRA GANGWAR

4 months ago

382
SideBar
Sidebar

nitro-x

3 months ago

313
Tailwind Sidebar Layout

Oliver Hansen

3 years ago

63.7k
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.7k
sidebar orange colour

Abhishek Kumar

1 year ago

1.7k
sdebar simple
sdebar simple

Omer fils ELENGA

8 months ago

475
AI SaaS Hero Section with Dashboard
A modern AI SaaS hero section built with HTML and Tailwind CSS featuring dashboard preview, CTA buttons, trust badges, responsive layout, and clean UI.

JUGENDRA GANGWAR

4 months ago

262