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

Sidebar

Author Nick Girga

Tailwind v3.4 1.6k 3

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

Tailwind Sidebar Layout

nejaa badr

2 years ago

9.2k
Elegant Animated Drawer (Responsive)
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).

Nick Girga

1 year ago

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

373
sidebar responsive
responsive sidebar with working links

Ganesh Salunke

9 months ago

1.3k
Dashboard sidebar

farid

2 years ago

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

29k
sidebar elastico

Raul antonio de la cruz hernandez

1 year ago

984
gallary
html , css

Hacker Development

1 year ago

1.7k
side bar
html css

Hacker Development

1 year ago

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

AKASH GANDHAR

2 years ago

11k
sidebar orange colour

Abhishek Kumar

1 year ago

1.7k
sidebar

Abhishek Kumar

1 year ago

1.4k