Menu Button

Hamburger menu button for toggling navigation drawers and sidebars. Supports CSS-animated hamburger-to-X transition, sizes, and glass variant.

Default (SVG Icon)

Preview

<button class="menu-button" aria-label="Menu">
  <span class="menu-button-icon">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
      <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
    </svg>
  </span>
</button>

Requires: ux.min.css

<button class="inline-flex items-center justify-center size-11 p-0 bg-transparent border-none cursor-pointer rounded-field" style="color: var(--color-base-content);" aria-label="Menu">
  <span class="flex items-center justify-center size-5">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" class="w-full h-full">
      <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
    </svg>
  </span>
</button>

Requires: tw.min.css

// Toggle drawer:
// document.querySelector('.menu-button').addEventListener('click', () => &#123;
//   document.querySelector('.drawer').dataset.state =
//     document.querySelector('.drawer').dataset.state === 'open' ? 'closed' : 'open';
// &#125;);

CSS Hamburger Lines (animated)

Preview

<div class="flex items-center gap-4">
  <!-- Closed state -->
  <button class="menu-button" aria-label="Open menu" aria-expanded="false">
    <span class="menu-button-lines">
      <span class="menu-button-line"></span>
      <span class="menu-button-line"></span>
      <span class="menu-button-line"></span>
    </span>
  </button>

  <!-- Open state (X icon) -->
  <button class="menu-button menu-button-open" aria-label="Close menu" aria-expanded="true">
    <span class="menu-button-lines">
      <span class="menu-button-line"></span>
      <span class="menu-button-line"></span>
      <span class="menu-button-line"></span>
    </span>
  </button>
</div>

Requires: ux.min.css

<div class="flex items-center gap-4">
  <!-- Closed state: three horizontal lines -->
  <button class="inline-flex items-center justify-center size-11 bg-transparent border-none cursor-pointer rounded-field" style="color: var(--color-base-content);" aria-label="Open menu">
    <span class="flex flex-col justify-center items-center gap-[5px]" style="width: 18px; height: 20px;">
      <span class="w-full bg-current rounded-full" style="height: 2px;"></span>
      <span class="w-full bg-current rounded-full" style="height: 2px;"></span>
      <span class="w-full bg-current rounded-full" style="height: 2px;"></span>
    </span>
  </button>

  <!-- Open state: apply transforms via JS to rotate into X -->
  <button class="inline-flex items-center justify-center size-11 bg-transparent border-none cursor-pointer rounded-field" style="color: var(--color-base-content);" aria-label="Close menu">
    <span class="flex flex-col justify-center items-center gap-[5px]" style="width: 18px; height: 20px;">
      <span class="w-full bg-current rounded-full" style="height: 2px; transform: translateY(7px) rotate(45deg);"></span>
      <span class="w-full bg-current rounded-full opacity-0" style="height: 2px; transform: scaleX(0);"></span>
      <span class="w-full bg-current rounded-full" style="height: 2px; transform: translateY(-7px) rotate(-45deg);"></span>
    </span>
  </button>
</div>

Requires: tw.min.css

// Toggle the animated hamburger:
const btn = document.querySelector('.menu-button');
btn.addEventListener('click', () => &#123;
  btn.classList.toggle('menu-button-open');
  const expanded = btn.classList.contains('menu-button-open');
  btn.setAttribute('aria-expanded', expanded);
  btn.setAttribute('aria-label', expanded ? 'Close menu' : 'Open menu');
&#125;);

Sizes

Preview

<div class="flex items-center gap-4">
  <button class="menu-button menu-button-sm" aria-label="Menu">
    <span class="menu-button-lines">
      <span class="menu-button-line"></span>
      <span class="menu-button-line"></span>
      <span class="menu-button-line"></span>
    </span>
  </button>

  <button class="menu-button" aria-label="Menu">
    <span class="menu-button-lines">
      <span class="menu-button-line"></span>
      <span class="menu-button-line"></span>
      <span class="menu-button-line"></span>
    </span>
  </button>

  <button class="menu-button menu-button-lg" aria-label="Menu">
    <span class="menu-button-lines">
      <span class="menu-button-line"></span>
      <span class="menu-button-line"></span>
      <span class="menu-button-line"></span>
    </span>
  </button>
</div>

Requires: ux.min.css

<div class="flex items-center gap-4">
  <!-- Small 36px -->
  <button class="inline-flex items-center justify-center size-9 bg-transparent border-none cursor-pointer rounded-field" style="color: var(--color-base-content);" aria-label="Menu">
    <span class="flex flex-col justify-center items-center gap-1" style="width: 14px; height: 16px;">
      <span class="w-full bg-current rounded-full" style="height: 2px;"></span>
      <span class="w-full bg-current rounded-full" style="height: 2px;"></span>
      <span class="w-full bg-current rounded-full" style="height: 2px;"></span>
    </span>
  </button>

  <!-- Default 44px -->
  <button class="inline-flex items-center justify-center size-11 bg-transparent border-none cursor-pointer rounded-field" style="color: var(--color-base-content);" aria-label="Menu">
    <span class="flex flex-col justify-center items-center gap-[5px]" style="width: 18px; height: 20px;">
      <span class="w-full bg-current rounded-full" style="height: 2px;"></span>
      <span class="w-full bg-current rounded-full" style="height: 2px;"></span>
      <span class="w-full bg-current rounded-full" style="height: 2px;"></span>
    </span>
  </button>

  <!-- Large 52px -->
  <button class="inline-flex items-center justify-center bg-transparent border-none cursor-pointer rounded-field" style="width: 3.25rem; height: 3.25rem; color: var(--color-base-content);" aria-label="Menu">
    <span class="flex flex-col justify-center items-center gap-1.5" style="width: 22px; height: 24px;">
      <span class="w-full bg-current rounded-full" style="height: 2px;"></span>
      <span class="w-full bg-current rounded-full" style="height: 2px;"></span>
      <span class="w-full bg-current rounded-full" style="height: 2px;"></span>
    </span>
  </button>
</div>

Requires: tw.min.css

// No JavaScript required

Variants

Preview

<div class="flex items-center gap-4">
  <button class="menu-button menu-button-filled" aria-label="Menu">
    <span class="menu-button-lines">
      <span class="menu-button-line"></span>
      <span class="menu-button-line"></span>
      <span class="menu-button-line"></span>
    </span>
  </button>

  <button class="menu-button menu-button-outline" aria-label="Menu">
    <span class="menu-button-lines">
      <span class="menu-button-line"></span>
      <span class="menu-button-line"></span>
      <span class="menu-button-line"></span>
    </span>
  </button>

  <button class="menu-button menu-button-rounded" aria-label="Menu">
    <span class="menu-button-lines">
      <span class="menu-button-line"></span>
      <span class="menu-button-line"></span>
      <span class="menu-button-line"></span>
    </span>
  </button>

  <button class="menu-button glass" aria-label="Menu">
    <span class="menu-button-lines">
      <span class="menu-button-line"></span>
      <span class="menu-button-line"></span>
      <span class="menu-button-line"></span>
    </span>
  </button>

  <button class="menu-button menu-button-labeled" aria-label="Menu">
    <span class="menu-button-lines">
      <span class="menu-button-line"></span>
      <span class="menu-button-line"></span>
      <span class="menu-button-line"></span>
    </span>
    <span class="menu-button-label">Menu</span>
  </button>
</div>

Requires: ux.min.css

<div class="flex items-center gap-4">
  <!-- Filled -->
  <button class="inline-flex items-center justify-center size-11 bg-base-200 border-none cursor-pointer rounded-field" style="color: var(--color-base-content);" aria-label="Menu">
    <span class="flex flex-col justify-center items-center gap-[5px]" style="width: 18px; height: 20px;"><span class="w-full bg-current rounded-full" style="height: 2px;"></span><span class="w-full bg-current rounded-full" style="height: 2px;"></span><span class="w-full bg-current rounded-full" style="height: 2px;"></span></span>
  </button>

  <!-- Outline -->
  <button class="inline-flex items-center justify-center size-11 bg-transparent border border-base-300 cursor-pointer rounded-field" style="color: var(--color-base-content);" aria-label="Menu">
    <span class="flex flex-col justify-center items-center gap-[5px]" style="width: 18px; height: 20px;"><span class="w-full bg-current rounded-full" style="height: 2px;"></span><span class="w-full bg-current rounded-full" style="height: 2px;"></span><span class="w-full bg-current rounded-full" style="height: 2px;"></span></span>
  </button>

  <!-- Rounded -->
  <button class="inline-flex items-center justify-center size-11 bg-transparent border-none cursor-pointer rounded-full" style="color: var(--color-base-content);" aria-label="Menu">
    <span class="flex flex-col justify-center items-center gap-[5px]" style="width: 18px; height: 20px;"><span class="w-full bg-current rounded-full" style="height: 2px;"></span><span class="w-full bg-current rounded-full" style="height: 2px;"></span><span class="w-full bg-current rounded-full" style="height: 2px;"></span></span>
  </button>

  <!-- Glass -->
  <button class="inline-flex items-center justify-center size-11 border-none cursor-pointer rounded-field glass" style="color: var(--color-base-content);" aria-label="Menu">
    <span class="flex flex-col justify-center items-center gap-[5px]" style="width: 18px; height: 20px;"><span class="w-full bg-current rounded-full" style="height: 2px;"></span><span class="w-full bg-current rounded-full" style="height: 2px;"></span><span class="w-full bg-current rounded-full" style="height: 2px;"></span></span>
  </button>

  <!-- With label -->
  <button class="inline-flex items-center justify-center gap-2 h-11 px-4 bg-transparent border-none cursor-pointer rounded-field" style="color: var(--color-base-content);" aria-label="Menu">
    <span class="flex flex-col justify-center items-center gap-[5px]" style="width: 18px; height: 20px;"><span class="w-full bg-current rounded-full" style="height: 2px;"></span><span class="w-full bg-current rounded-full" style="height: 2px;"></span><span class="w-full bg-current rounded-full" style="height: 2px;"></span></span>
    <span class="text-sm font-semibold">Menu</span>
  </button>
</div>

Requires: tw.min.css

// No JavaScript required

Classes Reference

Class	Description
.menu-button	Base menu button (44px square)
.menu-button-icon	SVG icon container
.menu-button-lines	CSS hamburger lines container
.menu-button-line	Individual hamburger line
.menu-button-open	Animate lines to X shape
.menu-button-sm	Small size (36px)
.menu-button-lg	Large size (52px)
.menu-button-filled	Subtle background fill
.menu-button-outline	Border outline style
.menu-button-rounded	Fully rounded (circle)
.menu-button.glass	Frosted glass variant
.menu-button-labeled	Wide button with text label
.menu-button-label	Label text element