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

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

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

Author:
Abhishek Kumar

6 months ago

672
gallary
html , css

Author:
Hacker Development

10 months ago

666
sdebar simple
sdebar simple

Author:
Omer fils ELENGA

1 week ago

5
Tailwind Sidebar Layout

Author:
Junior Gauze

1 year ago

1.9k
Sidebar with only icons

Author:
Rajesh Maheshwari

1 year ago

2.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

4k
side bar
html css

Author:
Hacker Development

10 months ago

1.2k
Tailwind Sidebar Layout

Author:
Oliver Hansen

3 years ago

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

Author:
Muhammad Rizqi Juniyanto

1 year ago

3.4k
Dashboard sidebar

Author:
farid

1 year ago

4.9k
Admin panel with collapsible menus

Author:
Rajesh Maheshwari

1 year ago

5.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components