28 Tailwind Hamburger Menus
23 / 28

All 28 in 28 Tailwind Hamburger Menus

  1. 01Tailwind Hamburger Menu with Clip-Path Circle Expansion
  2. 02Tailwind Keyboard Navigable Hamburger Menu with ARIA Attributes
  3. 03Tailwind Animated 3-Line to X Hamburger Icon Toggle
  4. 04Tailwind Slide-In Off-Canvas Drawer with Dimmed Backdrop Overlay
  5. 05Pure Tailwind Checkbox Hack Hamburger Navigation (No JavaScript)
  6. 06Tailwind Responsive Hamburger Menu with Integrated Search Bar & Social Links
  7. 07Tailwind Glassmorphism Backdrop Blur Hamburger Navigation
  8. 08Tailwind Push Page Navigation Menu (Off-Canvas Content Shift)
  9. 09Pure Tailwind Hamburger Menu Without JavaScript
  10. 10Tailwind Hamburger Menu Morphing to Close Icon Animation
  11. 11Tailwind Full Screen Mobile Navigation Overlay
  12. 12Tailwind Slide Out Sidebar Navigation / Off Canvas Menu
  13. 13Tailwind Responsive Navbar Mobile Hamburger Toggle Breakpoints
  14. 14Tailwind Minimalist Floating Hamburger Button
  15. 15Tailwind CSS Responsive Hamburger Menu Component
  16. 16Tailwind Rebuild of the Bootstrap 5 Navbar Hamburger Toggle
  17. 17Tailwind WCAG Accessible Hamburger Menu Example
  18. 18Pure Tailwind Dropdown Slide Down Mobile Hamburger Menu
  19. 19Simple 3-Line Tailwind Hamburger Icon Hover Effect
  20. 20Tailwind Full Screen Blur Overlay Hamburger Menu
  21. 21Tailwind Mobile Bottom Navigation Bar with Floating Hamburger Toggle
  22. 22Pure Tailwind Multi-Level Accordion Hamburger Dropdown Menu
  23. 23Flexbox Navbar Right-Aligned Tailwind Hamburger Icon
  24. 24Radial Ripple Expand Tailwind Hamburger Menu
  25. 25Sticky Tailwind Navbar Shrinking Hamburger Icon on Scroll
  26. 26Neumorphic Tailwind Hamburger Toggle Button
  27. 27Brutalist Design Bordered Tailwind Hamburger Menu
  28. 28Tailwind 3D Flip Canvas Mobile Hamburger Navigation
Pure TailwindMIT licensed

Flexbox Navbar Right-Aligned Tailwind Hamburger Icon

The layout lesson behind every navbar, taught on the navbar itself — flip the X-ray switch and the bar reveals its own construction with dashed outlines and callouts pinned to the three declarations doing all the work. In Tailwind the answer to “how do I push the hamburger right?” is two characters shorter and RTL-correct by default: ms-auto.

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="thb-23 w-full min-h-svh bg-thb23-bg font-thb23-sans text-thb23-ink px-5 py-9" aria-label="Flexbox navbar anatomy demo">
  <div class="group grid gap-2 p-6 rounded-[18px] border border-thb23-edge bg-thb23-bg">
    <div class="flex justify-end">
      <label for="thb23-x" class="flex items-center gap-2.5 min-h-11 px-1 text-[13px] font-bold cursor-pointer select-none">
        <input type="checkbox" id="thb23-x" class="peer absolute w-px h-px overflow-hidden whitespace-nowrap [clip-path:inset(50%)]">
        <i class="relative flex-none w-10 h-[23px] rounded-full bg-thb23-track transition-[background] duration-250 after:content-[''] after:absolute after:top-[2.5px] after:left-[2.5px] after:w-4.5 after:h-4.5 after:rounded-full after:bg-white after:shadow-[0_2px_5px_oklch(0.3_0.02_255/0.35)] after:transition-[translate] after:duration-250 group-has-checked:bg-thb23-blue group-has-checked:after:translate-x-[17px] peer-focus-visible:outline-2 peer-focus-visible:outline-thb23-blue peer-focus-visible:outline-offset-2" aria-hidden="true"></i>
        X-ray the layout
      </label>
    </div>
    <div class="relative px-2 pt-14 pb-10">
      <header class="relative flex items-center gap-6 min-h-15 px-5 rounded-[14px] bg-thb23-panel border border-thb23-edge shadow-[0_14px_34px_-26px_oklch(0.3_0.04_255/0.6)] outline-2 outline-dashed outline-offset-[5px] outline-transparent transition-[outline-color] duration-250 group-has-checked:outline-thb23-blue">
        <span class="flex items-center gap-2.25 text-[15px] font-extrabold">
          <i class="w-4.75 h-4.75 rounded-md bg-[conic-gradient(from_210deg,var(--color-thb23-blue),var(--color-thb23-violet))]" aria-hidden="true"></i>Framework
        </span>
        <nav aria-label="Primary" class="flex gap-1 rounded-lg outline-2 outline-dashed outline-offset-[3px] outline-transparent transition-[outline-color] duration-250 group-has-checked:outline-thb23-violet">
          <a href="#docs" class="px-3 py-2.25 rounded-lg text-[13.5px] font-semibold text-thb23-mut no-underline transition-[color,background] duration-150 hover:text-thb23-ink hover:bg-thb23-hover focus-visible:outline-2 focus-visible:outline-thb23-blue focus-visible:outline-offset-2">Docs</a>
          <a href="#examples" class="px-3 py-2.25 rounded-lg text-[13.5px] font-semibold text-thb23-mut no-underline transition-[color,background] duration-150 hover:text-thb23-ink hover:bg-thb23-hover focus-visible:outline-2 focus-visible:outline-thb23-blue focus-visible:outline-offset-2">Examples</a>
        </nav>
        <button type="button" aria-label="Open menu (demo)" class="ms-auto grid place-items-center w-11.5 h-11.5 rounded-[11px] border border-thb23-edge bg-thb23-panel text-thb23-ink cursor-pointer outline-2 outline-dashed outline-offset-[3px] outline-transparent transition-[background,outline-color] duration-250 hover:bg-thb23-hover group-has-checked:outline-thb23-amber focus-visible:outline-solid focus-visible:outline-thb23-blue focus-visible:outline-offset-2">
          <span class="relative block w-4.5 h-3" aria-hidden="true">
            <i class="absolute left-0 top-0 w-4.5 h-0.5 rounded-sm bg-current"></i>
            <i class="absolute left-0 top-[5px] w-4.5 h-0.5 rounded-sm bg-current"></i>
            <i class="absolute left-0 top-2.5 w-4.5 h-0.5 rounded-sm bg-current"></i>
          </span>
        </button>
        <span class="absolute -top-11 left-0 px-2.5 py-1.25 rounded-[7px] bg-thb23-blue text-white text-[11px] font-bold whitespace-nowrap opacity-0 translate-y-1.5 pointer-events-none transition-[opacity,translate] duration-300 ease-thb23 group-has-checked:opacity-100 group-has-checked:translate-y-0 after:content-[''] after:absolute after:top-full after:left-4.5 after:border-5 after:border-transparent after:border-t-thb23-blue"><code class="font-thb23-mono text-[10.5px] font-bold">display:flex &middot; align-items:center &middot; gap:24px</code></span>
        <span class="absolute -bottom-8.5 right-0 px-2.5 py-1.25 rounded-[7px] bg-thb23-amber text-white text-[11px] font-bold whitespace-nowrap opacity-0 translate-y-1.5 pointer-events-none transition-[opacity,translate] duration-300 ease-thb23 delay-[80ms] group-has-checked:opacity-100 group-has-checked:translate-y-0 after:content-[''] after:absolute after:bottom-full after:right-5 after:border-5 after:border-transparent after:border-b-thb23-amber"><code class="font-thb23-mono text-[10.5px] font-bold">ms-auto</code> &larr; pushes right</span>
        <span class="absolute -top-11 left-[44%] px-2.5 py-1.25 rounded-[7px] bg-thb23-violet text-white text-[11px] font-bold whitespace-nowrap opacity-0 translate-y-1.5 pointer-events-none transition-[opacity,translate] duration-300 ease-thb23 delay-[160ms] group-has-checked:opacity-100 group-has-checked:translate-y-0 after:content-[''] after:absolute after:top-full after:left-3.5 after:border-5 after:border-transparent after:border-t-thb23-violet"><code class="font-thb23-mono text-[10.5px] font-bold">gap</code></span>
      </header>
      <div class="absolute inset-x-2 bottom-2 flex items-center gap-2 font-thb23-mono text-[10px] font-bold tracking-[0.08em] text-thb23-blue opacity-0 transition-[opacity] duration-300 delay-200 group-has-checked:opacity-80" aria-hidden="true">
        <i class="flex-1 h-0.5 [background:repeating-linear-gradient(90deg,var(--color-thb23-blue)_0_8px,transparent_8px_14px)]"></i>main axis &rarr;
      </div>
    </div>
    <p class="text-center text-xs text-thb23-mut text-pretty" aria-hidden="true">the bar stays fully functional under the annotations &mdash; inspect a live specimen</p>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-thb23-bg: #fafafc;
  --color-thb23-bg: oklch(0.975 0.004 250);
  --color-thb23-panel: #ffffff;
  --color-thb23-panel: oklch(1 0 0);
  --color-thb23-hover: #f2f3f8;
  --color-thb23-hover: oklch(0.96 0.006 250);
  --color-thb23-edge: #e2e3ea;
  --color-thb23-edge: oklch(0.89 0.009 250);
  --color-thb23-track: #dcdde4;
  --color-thb23-track: oklch(0.88 0.01 250);
  --color-thb23-ink: #32354a;
  --color-thb23-ink: oklch(0.24 0.018 255);
  --color-thb23-mut: #70738a;
  --color-thb23-mut: oklch(0.53 0.014 255);
  --color-thb23-blue: #3f5fd9;
  --color-thb23-blue: oklch(0.55 0.18 255);
  --color-thb23-amber: #d09a3a;
  --color-thb23-amber: oklch(0.68 0.15 70);
  --color-thb23-violet: #8b3fd6;
  --color-thb23-violet: oklch(0.55 0.19 300);
  --font-thb23-sans: 'Space Grotesk', system-ui, sans-serif;
  --font-thb23-mono: 'JetBrains Mono', ui-monospace, monospace;
  --ease-thb23: cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's
   w-full min-h-svh. It scopes the demo, and it holds the stage at full height in the
   moment before the browser build has compiled its utilities. */

.thb-23 {
  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-thb23-bg: #fafafc;
  --color-thb23-bg: oklch(0.975 0.004 250);
  --color-thb23-panel: #ffffff;
  --color-thb23-panel: oklch(1 0 0);
  --color-thb23-hover: #f2f3f8;
  --color-thb23-hover: oklch(0.96 0.006 250);
  --color-thb23-edge: #e2e3ea;
  --color-thb23-edge: oklch(0.89 0.009 250);
  --color-thb23-track: #dcdde4;
  --color-thb23-track: oklch(0.88 0.01 250);
  --color-thb23-ink: #32354a;
  --color-thb23-ink: oklch(0.24 0.018 255);
  --color-thb23-mut: #70738a;
  --color-thb23-mut: oklch(0.53 0.014 255);
  --color-thb23-blue: #3f5fd9;
  --color-thb23-blue: oklch(0.55 0.18 255);
  --color-thb23-amber: #d09a3a;
  --color-thb23-amber: oklch(0.68 0.15 70);
  --color-thb23-violet: #8b3fd6;
  --color-thb23-violet: oklch(0.55 0.19 300);
  --font-thb23-sans: 'Space Grotesk', system-ui, sans-serif;
  --font-thb23-mono: 'JetBrains Mono', ui-monospace, monospace;
  --ease-thb23: cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's
   w-full min-h-svh. It scopes the demo, and it holds the stage at full height in the
   moment before the browser build has compiled its utilities. */

.thb-23 {
  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=Space+Grotesk:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap">

What changed in the port

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

  • The lesson gets shorter in utilities: margin-inline-start:auto is ms-auto, and because that is the SHORT spelling, the RTL-correct choice is also the default one — ml-auto takes more thought, not less.
  • Nine :has(#x:checked) rules become group-has-checked: utilities on the nine elements they annotated, so every callout and outline is declared where it appears.
  • The callout arrows stay pseudo-elements via after:border-5 after:border-t-thb23-blue — a CSS triangle is pure decoration and has no business being a DOM node.
  • The toggle switch's knob is also an after: layer, with its travel written as group-has-checked:after:translate-x-[17px]: one element, two states, no extra markup.
  • The dashed main-axis rule keeps its repeating-linear-gradient as an arbitrary background, since a dash pattern is not a scale value.
  • Zero JavaScript — the whole annotation layer is one clipped checkbox and a variant.
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: Flexbox Navbar Right-Aligned Tailwind Hamburger Icon
Source: https://codefronts.com/navigation/tailwind-hamburger-menus/flexbox-navbar-right-aligned-tailwind-hamburger-icon/

The layout lesson behind every navbar, taught on the navbar itself &mdash; flip the X-ray switch and the bar reveals its own construction with dashed outlines and callouts pinned to the three declarations doing all the work. In Tailwind the answer to &ldquo;how do I push the hamburger right?&rdquo; is two characters shorter and RTL-correct by default: ms-auto.
## HTML
```html
<section class="thb-23 w-full min-h-svh bg-thb23-bg font-thb23-sans text-thb23-ink px-5 py-9" aria-label="Flexbox navbar anatomy demo">
  <div class="group grid gap-2 p-6 rounded-[18px] border border-thb23-edge bg-thb23-bg">
    <div class="flex justify-end">
      <label for="thb23-x" class="flex items-center gap-2.5 min-h-11 px-1 text-[13px] font-bold cursor-pointer select-none">
        <input type="checkbox" id="thb23-x" class="peer absolute w-px h-px overflow-hidden whitespace-nowrap [clip-path:inset(50%)]">
        <i class="relative flex-none w-10 h-[23px] rounded-full bg-thb23-track transition-[background] duration-250 after:content-[''] after:absolute after:top-[2.5px] after:left-[2.5px] after:w-4.5 after:h-4.5 after:rounded-full after:bg-white after:shadow-[0_2px_5px_oklch(0.3_0.02_255/0.35)] after:transition-[translate] after:duration-250 group-has-checked:bg-thb23-blue group-has-checked:after:translate-x-[17px] peer-focus-visible:outline-2 peer-focus-visible:outline-thb23-blue peer-focus-visible:outline-offset-2" aria-hidden="true"></i>
        X-ray the layout
      </label>
    </div>
    <div class="relative px-2 pt-14 pb-10">
      <header class="relative flex items-center gap-6 min-h-15 px-5 rounded-[14px] bg-thb23-panel border border-thb23-edge shadow-[0_14px_34px_-26px_oklch(0.3_0.04_255/0.6)] outline-2 outline-dashed outline-offset-[5px] outline-transparent transition-[outline-color] duration-250 group-has-checked:outline-thb23-blue">
        <span class="flex items-center gap-2.25 text-[15px] font-extrabold">
          <i class="w-4.75 h-4.75 rounded-md bg-[conic-gradient(from_210deg,var(--color-thb23-blue),var(--color-thb23-violet))]" aria-hidden="true"></i>Framework
        </span>
        <nav aria-label="Primary" class="flex gap-1 rounded-lg outline-2 outline-dashed outline-offset-[3px] outline-transparent transition-[outline-color] duration-250 group-has-checked:outline-thb23-violet">
          <a href="#docs" class="px-3 py-2.25 rounded-lg text-[13.5px] font-semibold text-thb23-mut no-underline transition-[color,background] duration-150 hover:text-thb23-ink hover:bg-thb23-hover focus-visible:outline-2 focus-visible:outline-thb23-blue focus-visible:outline-offset-2">Docs</a>
          <a href="#examples" class="px-3 py-2.25 rounded-lg text-[13.5px] font-semibold text-thb23-mut no-underline transition-[color,background] duration-150 hover:text-thb23-ink hover:bg-thb23-hover focus-visible:outline-2 focus-visible:outline-thb23-blue focus-visible:outline-offset-2">Examples</a>
        </nav>
        <button type="button" aria-label="Open menu (demo)" class="ms-auto grid place-items-center w-11.5 h-11.5 rounded-[11px] border border-thb23-edge bg-thb23-panel text-thb23-ink cursor-pointer outline-2 outline-dashed outline-offset-[3px] outline-transparent transition-[background,outline-color] duration-250 hover:bg-thb23-hover group-has-checked:outline-thb23-amber focus-visible:outline-solid focus-visible:outline-thb23-blue focus-visible:outline-offset-2">
          <span class="relative block w-4.5 h-3" aria-hidden="true">
            <i class="absolute left-0 top-0 w-4.5 h-0.5 rounded-sm bg-current"></i>
            <i class="absolute left-0 top-[5px] w-4.5 h-0.5 rounded-sm bg-current"></i>
            <i class="absolute left-0 top-2.5 w-4.5 h-0.5 rounded-sm bg-current"></i>
          </span>
        </button>
        <span class="absolute -top-11 left-0 px-2.5 py-1.25 rounded-[7px] bg-thb23-blue text-white text-[11px] font-bold whitespace-nowrap opacity-0 translate-y-1.5 pointer-events-none transition-[opacity,translate] duration-300 ease-thb23 group-has-checked:opacity-100 group-has-checked:translate-y-0 after:content-[''] after:absolute after:top-full after:left-4.5 after:border-5 after:border-transparent after:border-t-thb23-blue"><code class="font-thb23-mono text-[10.5px] font-bold">display:flex &middot; align-items:center &middot; gap:24px</code></span>
        <span class="absolute -bottom-8.5 right-0 px-2.5 py-1.25 rounded-[7px] bg-thb23-amber text-white text-[11px] font-bold whitespace-nowrap opacity-0 translate-y-1.5 pointer-events-none transition-[opacity,translate] duration-300 ease-thb23 delay-[80ms] group-has-checked:opacity-100 group-has-checked:translate-y-0 after:content-[''] after:absolute after:bottom-full after:right-5 after:border-5 after:border-transparent after:border-b-thb23-amber"><code class="font-thb23-mono text-[10.5px] font-bold">ms-auto</code> &larr; pushes right</span>
        <span class="absolute -top-11 left-[44%] px-2.5 py-1.25 rounded-[7px] bg-thb23-violet text-white text-[11px] font-bold whitespace-nowrap opacity-0 translate-y-1.5 pointer-events-none transition-[opacity,translate] duration-300 ease-thb23 delay-[160ms] group-has-checked:opacity-100 group-has-checked:translate-y-0 after:content-[''] after:absolute after:top-full after:left-3.5 after:border-5 after:border-transparent after:border-t-thb23-violet"><code class="font-thb23-mono text-[10.5px] font-bold">gap</code></span>
      </header>
      <div class="absolute inset-x-2 bottom-2 flex items-center gap-2 font-thb23-mono text-[10px] font-bold tracking-[0.08em] text-thb23-blue opacity-0 transition-[opacity] duration-300 delay-200 group-has-checked:opacity-80" aria-hidden="true">
        <i class="flex-1 h-0.5 [background:repeating-linear-gradient(90deg,var(--color-thb23-blue)_0_8px,transparent_8px_14px)]"></i>main axis &rarr;
      </div>
    </div>
    <p class="text-center text-xs text-thb23-mut text-pretty" aria-hidden="true">the bar stays fully functional under the annotations &mdash; inspect a live specimen</p>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-thb23-bg: #fafafc;
  --color-thb23-bg: oklch(0.975 0.004 250);
  --color-thb23-panel: #ffffff;
  --color-thb23-panel: oklch(1 0 0);
  --color-thb23-hover: #f2f3f8;
  --color-thb23-hover: oklch(0.96 0.006 250);
  --color-thb23-edge: #e2e3ea;
  --color-thb23-edge: oklch(0.89 0.009 250);
  --color-thb23-track: #dcdde4;
  --color-thb23-track: oklch(0.88 0.01 250);
  --color-thb23-ink: #32354a;
  --color-thb23-ink: oklch(0.24 0.018 255);
  --color-thb23-mut: #70738a;
  --color-thb23-mut: oklch(0.53 0.014 255);
  --color-thb23-blue: #3f5fd9;
  --color-thb23-blue: oklch(0.55 0.18 255);
  --color-thb23-amber: #d09a3a;
  --color-thb23-amber: oklch(0.68 0.15 70);
  --color-thb23-violet: #8b3fd6;
  --color-thb23-violet: oklch(0.55 0.19 300);
  --font-thb23-sans: 'Space Grotesk', system-ui, sans-serif;
  --font-thb23-mono: 'JetBrains Mono', ui-monospace, monospace;
  --ease-thb23: cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's
   w-full min-h-svh. It scopes the demo, and it holds the stage at full height in the
   moment before the browser build has compiled its utilities. */

.thb-23 {
  width: 100%;
  min-height: 100svh;
}
```

How this works

Right-aligning one item in a flex row needs no wrapper. Auto margins absorb free space before justify-content even gets a say:

<header class="flex items-center gap-6 min-h-15">
  <span>brand</span>
  <nav class="flex gap-1">links</nav>
  <button class="ms-auto">burger</button>
</header>

That is the entire trick. Move ms-auto onto the links group instead and you get “logo left, everything else right”. Because Tailwind's logical utility is the SHORT one (ms-auto, not ml-auto), the RTL-correct choice is also the one you reach for first — a rare case where the framework's naming nudges you toward the better answer.

Why not justify-between. It spaces every child equally apart, which fails the moment you have three groups instead of two. Auto margins express intent per item.

The X-ray is group-has-checked: dressing. The switch is a clipped checkbox inside the group; each annotated element carries its own reveal:

class="outline-2 outline-dashed outline-transparent
       group-has-checked:outline-thb23-blue"

The bar meanwhile stays a real working navbar — hover states live, burger clickable — so you are inspecting a truthful specimen rather than an illustration.

Two supporting details worth absorbing: gap-6 spaces every sibling pair including the burger (auto margin and gap sum, they do not conflict), and items-center is what puts a 20px logo and a 44px button on one optical line.

Make it yours

  • Centred-links variant: put mx-auto on the links group — auto margins on both sides centre it while brand and burger hug the edges.
  • The X-ray colours code the concepts (container blue, auto-margin amber, gap violet) and are three @theme tokens.
  • Steal the pedagogy: a clipped checkbox plus group-has-checked: annotations documents ANY component — cards, forms, footers.
  • The burger opens nothing on purpose; the lesson is layout. Wire it to demo 18's panel when you lift this into a real site.
  • Swap ms-auto for ml-auto only if you never ship RTL — and then write down why.

Gotchas — read before shipping

  • justify-between is the blunt instrument people reach for. It spaces every child equally; with brand + links + burger (three groups) that is not what you want.
  • ml-auto hard-codes direction, so Arabic and Hebrew locales keep the burger visually left. ms-auto mirrors correctly — same for px-* versus ps-*/pe-* on the bar.
  • Use min-h-*, never h-*, on a navbar. A fixed height clips the focus rings of 44px targets the day someone bumps the base font size.
  • gap-* and ms-auto both apply between the links and the burger. They sum rather than conflict, but know both are in play when tuning the spacing.
  • group-has-checked: needs the checkbox inside the group. Putting the switch outside the group is the one way to break this annotation pattern.
  • outline-dashed with outline-transparent resting is what makes the reveal animatable — toggling outline-none to a colour jumps instead of fading.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Flexbox auto margins are 2015-era, flex gap is 2021 Baseline and logical margins are 2021. The X-ray layer's :has() needs Firefox 121; the navbar itself runs anywhere.

Techniques used in this demo

Utilitiesfirst-class utility or variant

:has()tw ↗transitionstw ↗transition delaytw ↗prefers-reduced-motiontw ↗

Arbitraryneeds bracket syntax

repeating linear gradienttw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →