Home
Nick Girga
Elegant Animated Drawer (Responsive)

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 CSS v3. It is responsive. It supports dark mode. similar terms for this example is drawer

Sidebar

Author Nick Girga

1.5k

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

sidebar elastico

Author:
Raul antonio de la cruz hernandez

6 months ago

568
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
Responsive navbar with alpinejs
A mix of Penguin navbar with PineUI Slide-Over

Author:
Muhammad Rizqi Juniyanto

1 year ago

3.2k
Ticket
Sirve para ticket

Author:
ANGEL EMILIANO MARQUEZ VAZQUEZ

1 year ago

1.9k
sidebar dash
sidebar dash

Author:
Omer fils ELENGA

3 weeks ago

68
Responsive navbar with dark mode support
Sidebar on small screen devices

Author:
Pardha Saradhy Madabhushi

1 year ago

2.6k
Daystar Day care Dashboard
Daystar Day care Dashboard

Author:
Paul Livingstone Ssenoga

1 year ago

10.1k
Responsive Sidebar
Fully Responsive sidebar in both color modes light & dark with mini bar too.

Author:
AKASH GANDHAR

1 year ago

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.

Author:
nejaa badr

1 year ago

4.4k
sidebar

Author:
Abhishek Kumar

5 months ago

442
Features Component

Author:
KULDEEP

6 months ago

1k
Tailwind Sidebar Layout

Author:
Oliver Hansen

2 years ago

61.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components