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

466

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