diff --git a/.changeset/mobile-hamburger-nav.md b/.changeset/mobile-hamburger-nav.md
new file mode 100644
index 0000000..18d97ec
--- /dev/null
+++ b/.changeset/mobile-hamburger-nav.md
@@ -0,0 +1,7 @@
+---
+"brand-shell": minor
+---
+
+Add mobile hamburger navigation to the Header component.
+
+All adapters (React, Web Component, Vue, Svelte) now render a hamburger toggle button when nav content is present. The menu opens and closes via `aria-expanded`, which drives CSS show/hide with no extra JS class manipulation. Keyboard (Escape) and outside-click gestures close the drawer. No API changes — existing `navLinks`, CTA, and social-link props continue to work as before.
diff --git a/scripts/check-pack.cjs b/scripts/check-pack.cjs
index adca94f..2ca1fdd 100644
--- a/scripts/check-pack.cjs
+++ b/scripts/check-pack.cjs
@@ -32,12 +32,14 @@ if (disallowedFiles.length > 0) {
   );
 }
 
-const sizeMatch = /Unpacked size:\s+([\d.]+)KB/.exec(output);
+const sizeMatch = /Unpacked size:\s+([\d.]+)(KB|MB)/.exec(output);
 if (!sizeMatch) {
   throw new Error("Pack check failed. Could not determine unpacked package size.");
 }
 
-const unpackedSizeKb = Number(sizeMatch[1]);
+const rawSize = Number(sizeMatch[1]);
+const unit = sizeMatch[2];
+const unpackedSizeKb = unit === "MB" ? Math.round(rawSize * 1024) : rawSize;
 if (!Number.isFinite(unpackedSizeKb)) {
   throw new Error("Pack check failed. Parsed unpacked package size is not a valid number.");
 }
diff --git a/src/Header.tsx b/src/Header.tsx
index fceea2b..64fa0ac 100644
--- a/src/Header.tsx
+++ b/src/Header.tsx
@@ -1,4 +1,6 @@
-import type { ReactElement, ReactNode } from "react";
+"use client";
+
+import { useCallback, useEffect, useRef, useState, type ReactElement, type ReactNode } from "react";
 import type { BrandDetails, BrandTheme } from "./types";
 import {
   assertValidBrandDetails,
@@ -49,6 +51,34 @@ export function Header({ details, theme, className, renderLink }: HeaderProps) {
   const { navLinks, ctaLinks, socialLinks } = buildShellViewModelFromNormalized(normalizedDetails);
   const combinedClassName = ["brand-shell-header", className].filter(Boolean).join(" ");
 
+  const hasNavContent = navLinks.length > 0 || ctaLinks.length > 0 || socialLinks.length > 0;
+  const [menuOpen, setMenuOpen] = useState(false);
+  const headerRef = useRef<HTMLElement>(null);
+
+  const closeMenu = useCallback(() => setMenuOpen(false), []);
+
+  // Close on Escape
+  useEffect(() => {
+    if (!menuOpen) return;
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") closeMenu();
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [menuOpen, closeMenu]);
+
+  // Close on outside click
+  useEffect(() => {
+    if (!menuOpen) return;
+    const onPointerDown = (e: PointerEvent) => {
+      if (headerRef.current && !headerRef.current.contains(e.target as Node)) {
+        closeMenu();
+      }
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => document.removeEventListener("pointerdown", onPointerDown);
+  }, [menuOpen, closeMenu]);
+
   const LinkEl = renderLink
     ? renderLink
     : ({ href, className: cls, "aria-label": ariaLabel, target, rel, children }: LinkRenderProps) => (
@@ -79,11 +109,27 @@ export function Header({ details, theme, className, renderLink }: HeaderProps) {
   );
 
   return (
-    <header className={combinedClassName} data-brand-cta-layout={ctaLayout} style={style} role="banner">
+    <header ref={headerRef} className={combinedClassName} data-brand-cta-layout={ctaLayout} style={style} role="banner">
       <a href="#main-content" className="brand-shell-skip-nav">Skip to main content</a>
       <div className="brand-shell-header__inner">
         {brandIdentity}
-        <div className="brand-shell-header__actions">
+        {hasNavContent && (
+          <button
+            type="button"
+            className="brand-shell-header__menu-toggle"
+            aria-label={menuOpen ? "Close menu" : "Open menu"}
+            aria-expanded={menuOpen}
+            aria-controls="brand-shell-nav-drawer"
+            onClick={() => setMenuOpen((o) => !o)}
+          >
+            <span className="brand-shell-header__menu-icon" aria-hidden="true">
+              <span />
+              <span />
+              <span />
+            </span>
+          </button>
+        )}
+        <div id="brand-shell-nav-drawer" className="brand-shell-header__actions">
           {navLinks.length > 0 && (
             <nav className="brand-shell-header__nav" aria-label="Primary">
               <ul className="brand-shell-header__list">
diff --git a/src/stories/Header.stories.tsx b/src/stories/Header.stories.tsx
index b6f80f0..249da52 100644
--- a/src/stories/Header.stories.tsx
+++ b/src/stories/Header.stories.tsx
@@ -205,3 +205,20 @@ export const SkipNavFocused: Story = {
     },
   },
 };
+
+export const MobileHamburger: Story = {
+  globals: {
+    viewport: { value: "mobile2", isRotated: false },
+  },
+  parameters: {
+    viewport: { defaultViewport: "mobile2" },
+    docs: {
+      description: {
+        story: "At ≤640px the hamburger toggle appears. Click it to open/close the nav drawer. Press Escape or click outside to close.",
+      },
+    },
+  },
+  args: {
+    stickyHeader: true,
+  },
+};
diff --git a/src/stories/Shell.stories.tsx b/src/stories/Shell.stories.tsx
index a223c1a..6c866be 100644
--- a/src/stories/Shell.stories.tsx
+++ b/src/stories/Shell.stories.tsx
@@ -196,6 +196,32 @@ export const MobileLayout: Story = {
   ),
 };
 
+export const MobileHamburger: Story = {
+  globals: {
+    viewport: { value: "mobile2", isRotated: false },
+  },
+  parameters: {
+    viewport: { defaultViewport: "mobile2" },
+  },
+  render: () => (
+    <div style={shellRootStyle}>
+      <style>{`.storybook-sticky-header{position:sticky;top:0;left:0;right:0;width:100%;z-index:40;}`}</style>
+      <Header
+        className="storybook-sticky-header"
+        details={fullDetails}
+        theme={{ socialIconSize: "2.2rem", ctaLayout: "inline" }}
+      />
+      <main id="main-content" style={{ ...shellMainStyle, padding: "1rem 0.9rem" }}>
+        <h1 style={shellHeadingStyle}>Mobile hamburger nav</h1>
+        <p style={shellParagraphStyle}>
+          Tap the ☰ button to open the nav drawer. Tap again, press Escape, or tap outside to close.
+        </p>
+      </main>
+      <Footer details={fullDetails} theme={{ socialIconSize: "2.2rem", ctaLayout: "inline" }} />
+    </div>
+  ),
+};
+
 export const StickyHeaderScroll: Story = {
   render: () => (
     <div style={stickyViewportStyle}>
diff --git a/src/web/index.test.ts b/src/web/index.test.ts
index b29a27b..55247ba 100644
--- a/src/web/index.test.ts
+++ b/src/web/index.test.ts
@@ -116,6 +116,77 @@ describe("web adapter smoke", () => {
     expect(attrs["shell-class"]).toBe("shell-attrs");
   });
 
+  it("renders hamburger toggle button when header has nav content", () => {
+    registerBrandShellElements();
+
+    const header = document.createElement("brand-header");
+    header.setAttribute("details", JSON.stringify({
+      name: "Brand Shell",
+      navLinks: [{ label: "Docs", href: "/docs" }],
+    }));
+    document.body.append(header);
+
+    const toggle = header.querySelector<HTMLButtonElement>(".brand-shell-header__menu-toggle");
+    expect(toggle).not.toBeNull();
+    expect(toggle?.getAttribute("aria-expanded")).toBe("false");
+    expect(toggle?.getAttribute("aria-label")).toBe("Open menu");
+    expect(toggle?.getAttribute("aria-controls")).toBe("brand-shell-nav-drawer");
+
+    const drawer = header.querySelector("#brand-shell-nav-drawer");
+    expect(drawer).not.toBeNull();
+  });
+
+  it("toggles aria-expanded on hamburger button click", () => {
+    registerBrandShellElements();
+
+    const header = document.createElement("brand-header");
+    header.setAttribute("details", JSON.stringify({
+      name: "Brand Shell",
+      navLinks: [{ label: "Docs", href: "/docs" }],
+    }));
+    document.body.append(header);
+
+    const toggle = header.querySelector<HTMLButtonElement>(".brand-shell-header__menu-toggle")!;
+    expect(toggle.getAttribute("aria-expanded")).toBe("false");
+
+    toggle.click();
+    expect(toggle.getAttribute("aria-expanded")).toBe("true");
+    expect(toggle.getAttribute("aria-label")).toBe("Close menu");
+
+    toggle.click();
+    expect(toggle.getAttribute("aria-expanded")).toBe("false");
+    expect(toggle.getAttribute("aria-label")).toBe("Open menu");
+  });
+
+  it("closes hamburger menu on Escape key", () => {
+    registerBrandShellElements();
+
+    const header = document.createElement("brand-header");
+    header.setAttribute("details", JSON.stringify({
+      name: "Brand Shell",
+      navLinks: [{ label: "Docs", href: "/docs" }],
+    }));
+    document.body.append(header);
+
+    const toggle = header.querySelector<HTMLButtonElement>(".brand-shell-header__menu-toggle")!;
+    toggle.click();
+    expect(toggle.getAttribute("aria-expanded")).toBe("true");
+
+    document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
+    expect(toggle.getAttribute("aria-expanded")).toBe("false");
+  });
+
+  it("does not render hamburger toggle when header has no nav content", () => {
+    registerBrandShellElements();
+
+    const header = document.createElement("brand-header");
+    header.setAttribute("details", JSON.stringify({ name: "Brand Shell" }));
+    document.body.append(header);
+
+    const toggle = header.querySelector(".brand-shell-header__menu-toggle");
+    expect(toggle).toBeNull();
+  });
+
   it("supports custom tag names", () => {
     const names = registerBrandShellElements({
       headerTagName: "brand-header-smoke",
diff --git a/src/web/index.ts b/src/web/index.ts
index 2c90c85..1c8bf86 100644
--- a/src/web/index.ts
+++ b/src/web/index.ts
@@ -181,13 +181,63 @@ abstract class BaseBrandShellElement extends HTMLElementBase {
 }
 
 export class BrandHeaderElement extends BaseBrandShellElement {
+  private _menuOpen = false;
+  private _cleanupMenu: (() => void) | null = null;
+
+  disconnectedCallback() {
+    this._cleanupMenu?.();
+    this._cleanupMenu = null;
+  }
+
   protected build(
     details: BrandDetails,
     theme: BrandTheme | null,
     shellClass: string | null,
     linkFactory: ((options: LinkFactoryOptions) => HTMLAnchorElement) | null,
   ): HTMLElement {
-    return createHeader(details, theme, shellClass, linkFactory ?? undefined);
+    // Clean up previous event listeners before rebuilding
+    this._cleanupMenu?.();
+    this._cleanupMenu = null;
+
+    const header = createHeader(details, theme, shellClass, linkFactory ?? undefined, this._menuOpen);
+
+    const toggle = header.querySelector<HTMLButtonElement>(".brand-shell-header__menu-toggle");
+    if (toggle) {
+      const onToggle = () => {
+        this._menuOpen = !this._menuOpen;
+        toggle.setAttribute("aria-expanded", String(this._menuOpen));
+        toggle.setAttribute("aria-label", this._menuOpen ? "Close menu" : "Open menu");
+      };
+
+      const onKeyDown = (e: KeyboardEvent) => {
+        if (e.key === "Escape" && this._menuOpen) {
+          this._menuOpen = false;
+          toggle.setAttribute("aria-expanded", "false");
+          toggle.setAttribute("aria-label", "Open menu");
+          toggle.focus();
+        }
+      };
+
+      const onPointerDown = (e: PointerEvent) => {
+        if (this._menuOpen && !header.contains(e.target as Node)) {
+          this._menuOpen = false;
+          toggle.setAttribute("aria-expanded", "false");
+          toggle.setAttribute("aria-label", "Open menu");
+        }
+      };
+
+      toggle.addEventListener("click", onToggle);
+      document.addEventListener("keydown", onKeyDown);
+      document.addEventListener("pointerdown", onPointerDown);
+
+      this._cleanupMenu = () => {
+        toggle.removeEventListener("click", onToggle);
+        document.removeEventListener("keydown", onKeyDown);
+        document.removeEventListener("pointerdown", onPointerDown);
+      };
+    }
+
+    return header;
   }
 }
 
@@ -292,6 +342,7 @@ function createHeader(
   theme: BrandTheme | null,
   shellClass: string | null,
   linkFactory?: (options: LinkFactoryOptions) => HTMLAnchorElement,
+  menuOpen = false,
 ): HTMLElement {
   const header = document.createElement("header");
   header.className = joinClassNames("brand-shell-header", shellClass);
@@ -321,11 +372,31 @@ function createHeader(
   }
   inner.append(identity);
 
+  const { navLinks, ctaLinks, socialLinks } = buildShellViewModel(details);
+  const hasNavContent = navLinks.length > 0 || ctaLinks.length > 0 || socialLinks.length > 0;
+
+  if (hasNavContent) {
+    const toggle = document.createElement("button");
+    toggle.type = "button";
+    toggle.className = "brand-shell-header__menu-toggle";
+    toggle.setAttribute("aria-label", menuOpen ? "Close menu" : "Open menu");
+    toggle.setAttribute("aria-expanded", String(menuOpen));
+    toggle.setAttribute("aria-controls", "brand-shell-nav-drawer");
+
+    const icon = document.createElement("span");
+    icon.className = "brand-shell-header__menu-icon";
+    icon.setAttribute("aria-hidden", "true");
+    for (let i = 0; i < 3; i++) {
+      icon.append(document.createElement("span"));
+    }
+    toggle.append(icon);
+    inner.append(toggle);
+  }
+
   const actions = document.createElement("div");
+  actions.id = "brand-shell-nav-drawer";
   actions.className = "brand-shell-header__actions";
 
-  const { navLinks, ctaLinks, socialLinks } = buildShellViewModel(details);
-
   if (navLinks.length > 0) {
     actions.append(createNav(navLinks, "brand-shell-header", "Primary", linkFactory));
   }
diff --git a/styles/default.css b/styles/default.css
index 4a1e50d..b26cc8c 100644
--- a/styles/default.css
+++ b/styles/default.css
@@ -286,6 +286,68 @@
   outline-offset: 3px;
 }
 
+/* Hamburger toggle button — hidden on desktop, visible on mobile */
+.brand-shell-header__menu-toggle {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 2.4rem;
+  height: 2.4rem;
+  padding: 0;
+  background: transparent;
+  border: 1px solid rgba(148, 163, 184, 0.28);
+  border-radius: var(--brand-radius);
+  color: var(--_text);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition:
+    background 0.2s ease,
+    border-color 0.2s ease;
+}
+
+.brand-shell-header__menu-toggle:hover {
+  background: rgba(148, 163, 184, 0.18);
+  border-color: rgba(148, 163, 184, 0.48);
+}
+
+.brand-shell-header__menu-toggle:focus-visible {
+  outline: 2px solid var(--_primary);
+  outline-offset: 3px;
+}
+
+/* Hamburger icon bars */
+.brand-shell-header__menu-icon {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 4px;
+  width: 18px;
+  height: 18px;
+  pointer-events: none;
+}
+
+.brand-shell-header__menu-icon span {
+  display: block;
+  width: 100%;
+  height: 2px;
+  border-radius: 2px;
+  background: currentColor;
+  transition: transform 0.22s ease, opacity 0.22s ease;
+  transform-origin: center;
+}
+
+/* Animate to × when open */
+.brand-shell-header__menu-toggle[aria-expanded="true"] .brand-shell-header__menu-icon span:nth-child(1) {
+  transform: translateY(6px) rotate(45deg);
+}
+.brand-shell-header__menu-toggle[aria-expanded="true"] .brand-shell-header__menu-icon span:nth-child(2) {
+  opacity: 0;
+  transform: scaleX(0);
+}
+.brand-shell-header__menu-toggle[aria-expanded="true"] .brand-shell-header__menu-icon span:nth-child(3) {
+  transform: translateY(-6px) rotate(-45deg);
+}
+
 @media (max-width: 920px) {
   .brand-shell-header__inner {
     flex-wrap: wrap;
@@ -318,14 +380,29 @@
   }
 
   .brand-shell-header__inner {
-    align-items: stretch;
+    align-items: center;
+    flex-wrap: wrap;
   }
 
+  /* Show the hamburger toggle on mobile */
+  .brand-shell-header__menu-toggle {
+    display: inline-flex;
+    margin-left: auto;
+  }
+
+  /* Collapse actions into a full-width drawer, hidden by default */
   .brand-shell-header__actions {
     width: 100%;
     flex-direction: column;
     align-items: stretch;
     gap: 0.5rem;
+    /* Collapsed state */
+    display: none;
+  }
+
+  /* Open state: toggle has aria-expanded="true" */
+  .brand-shell-header__menu-toggle[aria-expanded="true"] ~ .brand-shell-header__actions {
+    display: flex;
   }
 
   .brand-shell-header__nav {
@@ -690,6 +767,11 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
+  .brand-shell-header__menu-toggle,
+  .brand-shell-header__menu-icon span {
+    transition-duration: 0.01ms;
+  }
+
   .brand-shell-header,
   .brand-shell-footer,
   .brand-shell-header__name,
diff --git a/tsdown.config.ts b/tsdown.config.ts
index 1777d65..0697e3b 100644
--- a/tsdown.config.ts
+++ b/tsdown.config.ts
@@ -1,4 +1,21 @@
 import { defineConfig } from "tsdown";
+import type { Plugin } from "rolldown";
+
+/**
+ * Rolldown plugin that prepends "use client" to the React entry chunk
+ * (index.mjs) so Next.js App Router treats it as a Client Component boundary.
+ * All other chunks (web, vue, svelte) are left untouched.
+ */
+function useClientPlugin(): Plugin {
+  return {
+    name: "brand-shell:use-client",
+    renderChunk(code, chunk) {
+      if (chunk.fileName === "index.mjs") {
+        return { code: `"use client";\n${code}` };
+      }
+    },
+  };
+}
 
 export default defineConfig({
   entry: {
@@ -12,4 +29,5 @@ export default defineConfig({
   sourcemap: true,
   clean: true,
   external: ["react", "react-dom", "vue", "svelte"],
+  plugins: [useClientPlugin()],
 });