17 Tailwind CSS Side Menus
05 / 17

All 17 in 17 Tailwind CSS Side Menus

  1. 01Tailwind Slide-In Side Menu with Animated Hamburger Icon
  2. 02Tailwind Sidebar Drawer with Blurred Backdrop Overlay
  3. 03Tailwind Off-Canvas Push Sidebar Menu
  4. 04Tailwind Collapsible Icon Sidebar That Expands on Hover
  5. 05Responsive Tailwind Sidebar with Mobile Hamburger Toggle
  6. 06Tailwind Sticky Sidebar Navigation with Scrolling Content
  7. 07Tailwind Multi-Level Dropdown Sidebar Menu (Nested Accordion)
  8. 08Tailwind Full-Height Flexbox Sidebar Layout
  9. 09Tailwind Neumorphism Sidebar Menu (Dark Mode)
  10. 10Tailwind Glassmorphism Sidebar with Backdrop Blur
  11. 11Tailwind Cyberpunk Neon Sidebar (Dark Mode)
  12. 12Brutalist Sidebar Navigation in Tailwind CSS
  13. 13Pure CSS Hamburger Menu in Tailwind (Checkbox Hack, No JS)
  14. 14Tailwind Sidebar Drawer That Opens on Hover
  15. 15Tailwind Collapsible Sidebar with Toggle Button (No JS)
  16. 16Tailwind Accordion Sidebar Navigation for Documentation
  17. 17Tailwind macOS-Style Glass Dock Sidebar with Sliding Highlight
Pure TailwindMIT licensed

Responsive Tailwind Sidebar with Mobile Hamburger Toggle

One markup, two layouts: a permanent sidebar column on wide containers that becomes an off-canvas drawer with a hamburger toggle on narrow ones. The port switches on a container query (@max-[40rem]:) rather than the viewport, so the component responds to the space it is given — a sidebar inside a split pane collapses correctly even on a 27-inch monitor.

Live Demo
Plain CSSTailwind v4
Try it

Untitled UI Pro: 5,000+ React + Tailwind CSS v4 components · from $349 one-time

Untitled UI React · Affiliate link

Get Untitled UI Pro

The code

<section class="tsm-05 @container w-full min-h-svh bg-tsm05-bg font-tsm05-sans text-tsm05-ink" aria-label="Responsive sidebar with mobile hamburger toggle demo">
  <div class="group relative flex min-h-svh overflow-hidden">
    <input type="checkbox" id="tsm-05-toggle" class="peer sr-only">
    <label for="tsm-05-toggle" aria-hidden="true" class="pointer-events-none absolute inset-0 z-10 hidden bg-tsm05-ink/0 transition-colors @max-[40rem]:block @max-[40rem]:group-has-checked:pointer-events-auto @max-[40rem]:group-has-checked:bg-tsm05-ink/35"></label>
    <nav aria-label="Main" class="flex w-60 shrink-0 flex-col border-r border-tsm05-line bg-tsm05-surface py-5 transition-[translate,visibility] duration-350 ease-[cubic-bezier(0.4,0,0.2,1)] @max-[40rem]:invisible @max-[40rem]:absolute @max-[40rem]:inset-y-0 @max-[40rem]:left-0 @max-[40rem]:z-20 @max-[40rem]:-translate-x-full @max-[40rem]:shadow-[8px_0_32px_oklch(0.2_0.03_265/0.18)] @max-[40rem]:group-has-checked:visible @max-[40rem]:group-has-checked:translate-x-0 motion-reduce:transition-none">
      <div class="mx-5 mb-3 flex items-center gap-2.5 border-b border-tsm05-line pb-4">
        <span aria-hidden="true" class="grid size-[34px] place-items-center rounded-lg bg-linear-135 from-tsm05-acc to-tsm05-acc2 text-[15px] font-extrabold text-white">P</span>
        <p class="text-[15px] font-extrabold">Prism UI</p>
      </div>
      <p class="px-5 pt-2 pb-1 text-[10px] font-bold tracking-[0.12em] text-tsm05-mut uppercase">Main menu</p>
      <ul class="grid gap-0.5 px-2.5">
        <li><a href="#" class="flex min-h-11 items-center gap-2.5 rounded-[10px] px-3.5 text-sm font-semibold text-tsm05-mut transition-colors hover:bg-tsm05-acc/8 hover:text-tsm05-acc focus-visible:outline-2 focus-visible:outline-tsm05-acc aria-[current=page]:bg-tsm05-acc/10 aria-[current=page]:text-tsm05-acc" aria-current="page"><svg class="size-[18px] shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 10.5 12 3l9 7.5"/><path d="M5 9.5V20h14V9.5"/><path d="M10 20v-6h4v6"/></svg>Home</a></li>
        <li><a href="#" class="flex min-h-11 items-center gap-2.5 rounded-[10px] px-3.5 text-sm font-semibold text-tsm05-mut transition-colors hover:bg-tsm05-acc/8 hover:text-tsm05-acc focus-visible:outline-2 focus-visible:outline-tsm05-acc aria-[current=page]:bg-tsm05-acc/10 aria-[current=page]:text-tsm05-acc"><svg class="size-[18px] shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 3H6v18h12V7z"/><path d="M14 3v4h4"/><path d="M9 13h6M9 17h6"/></svg>Reports<span class="ml-auto rounded-full bg-tsm05-acc px-2 py-0.5 text-[10px] font-bold text-white">4</span></a></li>
        <li><a href="#" class="flex min-h-11 items-center gap-2.5 rounded-[10px] px-3.5 text-sm font-semibold text-tsm05-mut transition-colors hover:bg-tsm05-acc/8 hover:text-tsm05-acc focus-visible:outline-2 focus-visible:outline-tsm05-acc aria-[current=page]:bg-tsm05-acc/10 aria-[current=page]:text-tsm05-acc"><svg class="size-[18px] shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 10v4h4l8 5V5l-8 5z"/><path d="M19 9a4 4 0 0 1 0 6"/></svg>Campaigns</a></li>
        <li><a href="#" class="flex min-h-11 items-center gap-2.5 rounded-[10px] px-3.5 text-sm font-semibold text-tsm05-mut transition-colors hover:bg-tsm05-acc/8 hover:text-tsm05-acc focus-visible:outline-2 focus-visible:outline-tsm05-acc aria-[current=page]:bg-tsm05-acc/10 aria-[current=page]:text-tsm05-acc"><svg class="size-[18px] shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="8" r="3.5"/><path d="M2.5 20a6.5 6.5 0 0 1 13 0"/><path d="M16 4.5a3.5 3.5 0 0 1 0 7"/><path d="M18 14.5a6.5 6.5 0 0 1 3.5 5.5"/></svg>Audience</a></li>
      </ul>
      <p class="px-5 pt-2 pb-1 text-[10px] font-bold tracking-[0.12em] text-tsm05-mut uppercase mt-3 border-t border-tsm05-line pt-4">Account</p>
      <ul class="grid flex-1 content-start gap-0.5 px-2.5">
        <li><a href="#" class="flex min-h-11 items-center gap-2.5 rounded-[10px] px-3.5 text-sm font-semibold text-tsm05-mut transition-colors hover:bg-tsm05-acc/8 hover:text-tsm05-acc focus-visible:outline-2 focus-visible:outline-tsm05-acc aria-[current=page]:bg-tsm05-acc/10 aria-[current=page]:text-tsm05-acc"><svg class="size-[18px] shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg>Profile</a></li>
        <li><a href="#" class="flex min-h-11 items-center gap-2.5 rounded-[10px] px-3.5 text-sm font-semibold text-tsm05-mut transition-colors hover:bg-tsm05-acc/8 hover:text-tsm05-acc focus-visible:outline-2 focus-visible:outline-tsm05-acc aria-[current=page]:bg-tsm05-acc/10 aria-[current=page]:text-tsm05-acc"><svg class="size-[18px] shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 6h9"/><path d="M19 6h1"/><circle cx="16" cy="6" r="2.5"/><path d="M4 12h2"/><path d="M12 12h8"/><circle cx="9" cy="12" r="2.5"/><path d="M4 18h11"/><circle cx="18" cy="18" r="2.5"/></svg>Settings</a></li>
      </ul>
      <div class="mx-4 flex items-center gap-2.5 border-t border-tsm05-line pt-4">
        <span aria-hidden="true" class="grid size-8 place-items-center rounded-full bg-linear-135 from-indigo-500 to-purple-500 text-xs font-bold text-white">SR</span>
        <div><p class="text-[13px] font-bold">Sam R.</p><p class="text-[11px] text-tsm05-mut">Editor</p></div>
      </div>
    </nav>
    <div class="min-w-0 flex-1">
      <div class="flex items-center gap-3.5 border-b border-tsm05-line bg-tsm05-surface px-5 py-3.5">
        <label for="tsm-05-toggle" class="hidden size-11 cursor-pointer place-content-center gap-1 rounded-lg border border-tsm05-line bg-tsm05-bg transition-colors hover:bg-tsm05-acc/10 group-has-[input:focus-visible]:outline-2 group-has-[input:focus-visible]:outline-offset-2 group-has-[input:focus-visible]:outline-tsm05-acc @max-[40rem]:grid">
          <span class="sr-only">Toggle navigation menu</span>
          <span aria-hidden="true" class="block h-0.5 w-4 rounded-full bg-tsm05-mut"></span><span aria-hidden="true" class="block h-0.5 w-4 rounded-full bg-tsm05-mut"></span><span aria-hidden="true" class="block h-0.5 w-4 rounded-full bg-tsm05-mut"></span>
        </label>
        <h1 class="text-base font-extrabold">Home</h1>
        <nav aria-label="Breadcrumb" class="ml-auto text-xs text-tsm05-mut @max-[28rem]:hidden">Prism <span aria-hidden="true">/</span> Home</nav>
      </div>
      <div class="mx-auto max-w-3xl px-5 py-6">
        <p class="text-[19px] font-extrabold">Good morning, Sam</p>
        <p class="mt-1.5 mb-5 max-w-prose text-[13px] leading-relaxed text-tsm05-mut text-pretty">The sidebar is a column while this component is wider than 640px. Narrow it (or switch the preview to mobile) and it becomes a drawer behind the menu button.</p>
        <div class="grid grid-cols-2 gap-2.5 @3xl:grid-cols-4">
          <div class="rounded-xl border border-tsm05-line bg-tsm05-surface p-4 shadow-[0_1px_3px_oklch(0.2_0.03_265/0.06)]"><p class="text-[22px] font-extrabold tabular-nums text-tsm05-acc">5,382</p><p class="mt-1 text-xs text-tsm05-mut">Sessions</p></div>
          <div class="rounded-xl border border-tsm05-line bg-tsm05-surface p-4 shadow-[0_1px_3px_oklch(0.2_0.03_265/0.06)]"><p class="text-[22px] font-extrabold tabular-nums text-tsm05-acc">63%</p><p class="mt-1 text-xs text-tsm05-mut">Conversion</p></div>
          <div class="rounded-xl border border-tsm05-line bg-tsm05-surface p-4 shadow-[0_1px_3px_oklch(0.2_0.03_265/0.06)]"><p class="text-[22px] font-extrabold tabular-nums text-tsm05-acc">228</p><p class="mt-1 text-xs text-tsm05-mut">Subscribers</p></div>
          <div class="rounded-xl border border-tsm05-line bg-tsm05-surface p-4 shadow-[0_1px_3px_oklch(0.2_0.03_265/0.06)]"><p class="text-[22px] font-extrabold tabular-nums text-tsm05-acc">$4.8k</p><p class="mt-1 text-xs text-tsm05-mut">Revenue</p></div>
        </div>
      </div>
    </div>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-tsm05-bg: #f8fafc;
  --color-tsm05-bg: oklch(0.984 0.003 247.9);
  --color-tsm05-surface: #ffffff;
  --color-tsm05-surface: oklch(1 0 0);
  --color-tsm05-line: #e2e8f0;
  --color-tsm05-line: oklch(0.929 0.013 255.5);
  --color-tsm05-acc: #6366f1;
  --color-tsm05-acc: oklch(0.585 0.204 277.1);
  --color-tsm05-acc2: #818cf8;
  --color-tsm05-acc2: oklch(0.68 0.158 276.9);
  --color-tsm05-ink: #1e293b;
  --color-tsm05-ink: oklch(0.279 0.037 260);
  --color-tsm05-mut: #5b6b80;
  --color-tsm05-mut: oklch(0.522 0.039 255.3);
  --font-tsm05-sans: 'Nunito', system-ui, sans-serif;
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's utilities, so the
   stage is sized before the browser build compiles. */

.tsm-05 {
  width: 100%;
  min-height: 100svh;
}

Setup — do this once per project

Skip this if your project already runs Tailwind v4.

1Load Tailwind
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

Compiles in the browser — perfect for a CodePen or a quick test, not for production.

2Add the stylesheetRequiredthe @theme block is what makes the custom utilities exist
@import "tailwindcss";

@theme {
  --color-tsm05-bg: #f8fafc;
  --color-tsm05-bg: oklch(0.984 0.003 247.9);
  --color-tsm05-surface: #ffffff;
  --color-tsm05-surface: oklch(1 0 0);
  --color-tsm05-line: #e2e8f0;
  --color-tsm05-line: oklch(0.929 0.013 255.5);
  --color-tsm05-acc: #6366f1;
  --color-tsm05-acc: oklch(0.585 0.204 277.1);
  --color-tsm05-acc2: #818cf8;
  --color-tsm05-acc2: oklch(0.68 0.158 276.9);
  --color-tsm05-ink: #1e293b;
  --color-tsm05-ink: oklch(0.279 0.037 260);
  --color-tsm05-mut: #5b6b80;
  --color-tsm05-mut: oklch(0.522 0.039 255.3);
  --font-tsm05-sans: 'Nunito', system-ui, sans-serif;
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's utilities, so the
   stage is sized before the browser build compiles. */

.tsm-05 {
  width: 100%;
  min-height: 100svh;
}
3Fonts used by this demooptional — skip if you have your own type stack
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap">

What changed in the port

Which parts became utilities, which stayed CSS, and why.

  • Both @media (max-width:600px) blocks became @max-[40rem]: container variants on the elements they change — the component now responds to its slot, not the window.
  • UI upgrade from the CSS original: the mobile drawer gained a click-outside scrim (the original overlapped content with no way to dismiss except the burger) and is invisible while closed.
  • UI upgrade: the breadcrumb is a labelled <nav> that hides below 28rem instead of colliding with the title, and the burger grew from 36px to 44px.
  • UI upgrade: muted grey went from #94a3b8 (2.6:1 on white — failing) to #5b6b80 (5.6:1); the welcome emoji was dropped.
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS demo from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Responsive Tailwind Sidebar with Mobile Hamburger Toggle
Source: https://codefronts.com/navigation/tailwind-css-side-menus/responsive-tailwind-sidebar-mobile-hamburger-toggle/

One markup, two layouts: a permanent sidebar column on wide containers that becomes an off-canvas drawer with a hamburger toggle on narrow ones. The port switches on a container query (@max-[40rem]:) rather than the viewport, so the component responds to the space it is given — a sidebar inside a split pane collapses correctly even on a 27-inch monitor.
## HTML
```html
<section class="tsm-05 @container w-full min-h-svh bg-tsm05-bg font-tsm05-sans text-tsm05-ink" aria-label="Responsive sidebar with mobile hamburger toggle demo">
  <div class="group relative flex min-h-svh overflow-hidden">
    <input type="checkbox" id="tsm-05-toggle" class="peer sr-only">
    <label for="tsm-05-toggle" aria-hidden="true" class="pointer-events-none absolute inset-0 z-10 hidden bg-tsm05-ink/0 transition-colors @max-[40rem]:block @max-[40rem]:group-has-checked:pointer-events-auto @max-[40rem]:group-has-checked:bg-tsm05-ink/35"></label>
    <nav aria-label="Main" class="flex w-60 shrink-0 flex-col border-r border-tsm05-line bg-tsm05-surface py-5 transition-[translate,visibility] duration-350 ease-[cubic-bezier(0.4,0,0.2,1)] @max-[40rem]:invisible @max-[40rem]:absolute @max-[40rem]:inset-y-0 @max-[40rem]:left-0 @max-[40rem]:z-20 @max-[40rem]:-translate-x-full @max-[40rem]:shadow-[8px_0_32px_oklch(0.2_0.03_265/0.18)] @max-[40rem]:group-has-checked:visible @max-[40rem]:group-has-checked:translate-x-0 motion-reduce:transition-none">
      <div class="mx-5 mb-3 flex items-center gap-2.5 border-b border-tsm05-line pb-4">
        <span aria-hidden="true" class="grid size-[34px] place-items-center rounded-lg bg-linear-135 from-tsm05-acc to-tsm05-acc2 text-[15px] font-extrabold text-white">P</span>
        <p class="text-[15px] font-extrabold">Prism UI</p>
      </div>
      <p class="px-5 pt-2 pb-1 text-[10px] font-bold tracking-[0.12em] text-tsm05-mut uppercase">Main menu</p>
      <ul class="grid gap-0.5 px-2.5">
        <li><a href="#" class="flex min-h-11 items-center gap-2.5 rounded-[10px] px-3.5 text-sm font-semibold text-tsm05-mut transition-colors hover:bg-tsm05-acc/8 hover:text-tsm05-acc focus-visible:outline-2 focus-visible:outline-tsm05-acc aria-[current=page]:bg-tsm05-acc/10 aria-[current=page]:text-tsm05-acc" aria-current="page"><svg class="size-[18px] shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 10.5 12 3l9 7.5"/><path d="M5 9.5V20h14V9.5"/><path d="M10 20v-6h4v6"/></svg>Home</a></li>
        <li><a href="#" class="flex min-h-11 items-center gap-2.5 rounded-[10px] px-3.5 text-sm font-semibold text-tsm05-mut transition-colors hover:bg-tsm05-acc/8 hover:text-tsm05-acc focus-visible:outline-2 focus-visible:outline-tsm05-acc aria-[current=page]:bg-tsm05-acc/10 aria-[current=page]:text-tsm05-acc"><svg class="size-[18px] shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 3H6v18h12V7z"/><path d="M14 3v4h4"/><path d="M9 13h6M9 17h6"/></svg>Reports<span class="ml-auto rounded-full bg-tsm05-acc px-2 py-0.5 text-[10px] font-bold text-white">4</span></a></li>
        <li><a href="#" class="flex min-h-11 items-center gap-2.5 rounded-[10px] px-3.5 text-sm font-semibold text-tsm05-mut transition-colors hover:bg-tsm05-acc/8 hover:text-tsm05-acc focus-visible:outline-2 focus-visible:outline-tsm05-acc aria-[current=page]:bg-tsm05-acc/10 aria-[current=page]:text-tsm05-acc"><svg class="size-[18px] shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 10v4h4l8 5V5l-8 5z"/><path d="M19 9a4 4 0 0 1 0 6"/></svg>Campaigns</a></li>
        <li><a href="#" class="flex min-h-11 items-center gap-2.5 rounded-[10px] px-3.5 text-sm font-semibold text-tsm05-mut transition-colors hover:bg-tsm05-acc/8 hover:text-tsm05-acc focus-visible:outline-2 focus-visible:outline-tsm05-acc aria-[current=page]:bg-tsm05-acc/10 aria-[current=page]:text-tsm05-acc"><svg class="size-[18px] shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="8" r="3.5"/><path d="M2.5 20a6.5 6.5 0 0 1 13 0"/><path d="M16 4.5a3.5 3.5 0 0 1 0 7"/><path d="M18 14.5a6.5 6.5 0 0 1 3.5 5.5"/></svg>Audience</a></li>
      </ul>
      <p class="px-5 pt-2 pb-1 text-[10px] font-bold tracking-[0.12em] text-tsm05-mut uppercase mt-3 border-t border-tsm05-line pt-4">Account</p>
      <ul class="grid flex-1 content-start gap-0.5 px-2.5">
        <li><a href="#" class="flex min-h-11 items-center gap-2.5 rounded-[10px] px-3.5 text-sm font-semibold text-tsm05-mut transition-colors hover:bg-tsm05-acc/8 hover:text-tsm05-acc focus-visible:outline-2 focus-visible:outline-tsm05-acc aria-[current=page]:bg-tsm05-acc/10 aria-[current=page]:text-tsm05-acc"><svg class="size-[18px] shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg>Profile</a></li>
        <li><a href="#" class="flex min-h-11 items-center gap-2.5 rounded-[10px] px-3.5 text-sm font-semibold text-tsm05-mut transition-colors hover:bg-tsm05-acc/8 hover:text-tsm05-acc focus-visible:outline-2 focus-visible:outline-tsm05-acc aria-[current=page]:bg-tsm05-acc/10 aria-[current=page]:text-tsm05-acc"><svg class="size-[18px] shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 6h9"/><path d="M19 6h1"/><circle cx="16" cy="6" r="2.5"/><path d="M4 12h2"/><path d="M12 12h8"/><circle cx="9" cy="12" r="2.5"/><path d="M4 18h11"/><circle cx="18" cy="18" r="2.5"/></svg>Settings</a></li>
      </ul>
      <div class="mx-4 flex items-center gap-2.5 border-t border-tsm05-line pt-4">
        <span aria-hidden="true" class="grid size-8 place-items-center rounded-full bg-linear-135 from-indigo-500 to-purple-500 text-xs font-bold text-white">SR</span>
        <div><p class="text-[13px] font-bold">Sam R.</p><p class="text-[11px] text-tsm05-mut">Editor</p></div>
      </div>
    </nav>
    <div class="min-w-0 flex-1">
      <div class="flex items-center gap-3.5 border-b border-tsm05-line bg-tsm05-surface px-5 py-3.5">
        <label for="tsm-05-toggle" class="hidden size-11 cursor-pointer place-content-center gap-1 rounded-lg border border-tsm05-line bg-tsm05-bg transition-colors hover:bg-tsm05-acc/10 group-has-[input:focus-visible]:outline-2 group-has-[input:focus-visible]:outline-offset-2 group-has-[input:focus-visible]:outline-tsm05-acc @max-[40rem]:grid">
          <span class="sr-only">Toggle navigation menu</span>
          <span aria-hidden="true" class="block h-0.5 w-4 rounded-full bg-tsm05-mut"></span><span aria-hidden="true" class="block h-0.5 w-4 rounded-full bg-tsm05-mut"></span><span aria-hidden="true" class="block h-0.5 w-4 rounded-full bg-tsm05-mut"></span>
        </label>
        <h1 class="text-base font-extrabold">Home</h1>
        <nav aria-label="Breadcrumb" class="ml-auto text-xs text-tsm05-mut @max-[28rem]:hidden">Prism <span aria-hidden="true">/</span> Home</nav>
      </div>
      <div class="mx-auto max-w-3xl px-5 py-6">
        <p class="text-[19px] font-extrabold">Good morning, Sam</p>
        <p class="mt-1.5 mb-5 max-w-prose text-[13px] leading-relaxed text-tsm05-mut text-pretty">The sidebar is a column while this component is wider than 640px. Narrow it (or switch the preview to mobile) and it becomes a drawer behind the menu button.</p>
        <div class="grid grid-cols-2 gap-2.5 @3xl:grid-cols-4">
          <div class="rounded-xl border border-tsm05-line bg-tsm05-surface p-4 shadow-[0_1px_3px_oklch(0.2_0.03_265/0.06)]"><p class="text-[22px] font-extrabold tabular-nums text-tsm05-acc">5,382</p><p class="mt-1 text-xs text-tsm05-mut">Sessions</p></div>
          <div class="rounded-xl border border-tsm05-line bg-tsm05-surface p-4 shadow-[0_1px_3px_oklch(0.2_0.03_265/0.06)]"><p class="text-[22px] font-extrabold tabular-nums text-tsm05-acc">63%</p><p class="mt-1 text-xs text-tsm05-mut">Conversion</p></div>
          <div class="rounded-xl border border-tsm05-line bg-tsm05-surface p-4 shadow-[0_1px_3px_oklch(0.2_0.03_265/0.06)]"><p class="text-[22px] font-extrabold tabular-nums text-tsm05-acc">228</p><p class="mt-1 text-xs text-tsm05-mut">Subscribers</p></div>
          <div class="rounded-xl border border-tsm05-line bg-tsm05-surface p-4 shadow-[0_1px_3px_oklch(0.2_0.03_265/0.06)]"><p class="text-[22px] font-extrabold tabular-nums text-tsm05-acc">$4.8k</p><p class="mt-1 text-xs text-tsm05-mut">Revenue</p></div>
        </div>
      </div>
    </div>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tsm05-bg: #f8fafc;
  --color-tsm05-bg: oklch(0.984 0.003 247.9);
  --color-tsm05-surface: #ffffff;
  --color-tsm05-surface: oklch(1 0 0);
  --color-tsm05-line: #e2e8f0;
  --color-tsm05-line: oklch(0.929 0.013 255.5);
  --color-tsm05-acc: #6366f1;
  --color-tsm05-acc: oklch(0.585 0.204 277.1);
  --color-tsm05-acc2: #818cf8;
  --color-tsm05-acc2: oklch(0.68 0.158 276.9);
  --color-tsm05-ink: #1e293b;
  --color-tsm05-ink: oklch(0.279 0.037 260);
  --color-tsm05-mut: #5b6b80;
  --color-tsm05-mut: oklch(0.522 0.039 255.3);
  --font-tsm05-sans: 'Nunito', system-ui, sans-serif;
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's utilities, so the
   stage is sized before the browser build compiles. */

.tsm-05 {
  width: 100%;
  min-height: 100svh;
}
```

How this works

Container, not viewport. The original used @media (max-width:600px). Here the root is @container and every narrow-mode rule is a container variant:

<nav class="w-60
  @max-[40rem]:absolute @max-[40rem]:inset-y-0
  @max-[40rem]:-translate-x-full @max-[40rem]:invisible
  @max-[40rem]:group-has-checked:visible
  @max-[40rem]:group-has-checked:translate-x-0">

Variants stack left to right. @max-[40rem]:group-has-checked: compiles to a container query wrapping a :has() selector, so the checkbox has no effect on wide layouts — open state can't leak into desktop.

Scrim and burger follow the same rule: hidden @max-[40rem]:grid for the button, and a click-to-close label that only becomes interactive when narrow and open.

Make it yours

  • Breakpoint: change every @max-[40rem]: — @max-3xl: (48rem) folds on tablets too.
  • Viewport instead: replace @max-[40rem]: with max-sm: if the sidebar always spans the page.
  • Show a compact logo in the top bar only when narrow with hidden @max-[40rem]:flex.
  • Push instead of overlay: add @max-[40rem]:group-has-checked:translate-x-60 to the main column.

Gotchas — read before shipping

  • A container cannot query itself — the root section is the container and the flex wrapper inside it does the layout.
  • Container queries measure the inline size only; @container sets container-type: inline-size, which also stops the root from sizing to its content width.
  • If the checkbox is left checked when the container grows, the nav simply returns to the column — but the scrim must be scoped to narrow mode too, or it would cover the desktop page.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Size container queries are Chrome 105 / Safari 16 / Firefox 110; the floor is v4's own sheet.

Techniques used in this demo

Utilitiesfirst-class utility or variant

container queriestw ↗:has()tw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →