Hamburger Menu (Nav Drawer) new 汉堡菜单（导航抽屉） web
The three-line button and the navigation panel it slides open
三条线的按钮，以及它滑出的导航面板
标本可交互 —— 点点看。Specimen is live — try it.
Anatomy — every part, named解剖 —— 每个部件的名字
-
1 Hamburger button汉堡按钮（Hamburger button）
aria-expanded“The three stacked lines” are the hamburger button — a plain toggle whose aria-expanded tracks the drawer.
“三条叠线”就是汉堡按钮 —— 一个纯粹的开关，aria-expanded 跟随抽屉状态。
Prompt fragmentPrompt 片段a hamburger button: three stacked 2px lines in a <button aria-expanded aria-controls> at the bar's left edge
一个汉堡按钮：工具栏左边缘的 <button aria-expanded aria-controls> 里画三条 2px 叠线
-
2 Navigation drawer导航抽屉（Navigation drawer）
Sheet side="left"“The side menu that slides over the page” is the navigation drawer — an off-canvas <nav> panel above a scrim.
“滑过来盖住页面的侧边菜单”就是导航抽屉 —— 屏外的 <nav> 面板，浮在遮罩之上。
Prompt fragmentPrompt 片段a navigation drawer: an off-canvas <nav> panel sliding from the left over a scrim, body scroll locked while open
一个导航抽屉：从左侧滑入、盖在遮罩上的屏外 <nav> 面板，打开期间锁定 body 滚动
Prompt — paste into your agentPrompt —— 直接粘贴给你的代理
Build a hamburger menu: a <button aria-expanded aria-controls> drawing three stacked lines that toggles a navigation drawer — an off-canvas <nav> panel sliding in from the left over a scrim (shadcn Sheet side="left", Material NavigationDrawer). Lock body scroll while open, close on Escape and scrim tap, keep aria-expanded in sync, and return focus to the button on close.
构建一个汉堡菜单：一个 <button aria-expanded aria-controls>，画三条叠放的线，用来开合导航抽屉 —— 一个从左侧滑入、盖在遮罩（scrim）上的屏外 <nav> 面板（shadcn Sheet side="left"，Material NavigationDrawer）。打开时锁定 body 滚动，Escape 和点遮罩关闭，aria-expanded 保持同步，关闭后焦点回到按钮。
Debug prompt — when it misbehaves调试 Prompt —— 当它不听话时
Debug my hamburger menu (aria-expanded toggle + off-canvas <nav> drawer). Rule out: the drawer rendering under the scrim or page header (z-order); body still scrolling behind the open drawer; aria-expanded never flipping so screen readers see a dead button; focus staying lost in the drawer after close instead of returning to the button; the drawer animating from the wrong edge because translate-x sign flipped; the menu unreachable on desktop because the toggle is hidden above the breakpoint but the nav links never reappear. The symptom:
调试我的汉堡菜单（aria-expanded 开关 + 屏外 <nav> 抽屉）。逐项排除：抽屉渲染在遮罩或页头下面（z 轴顺序）；抽屉打开时背后的 body 还在滚；aria-expanded 从不翻转，屏幕阅读器看到的是死按钮；关闭后焦点丢在抽屉里，没有回到按钮；translate-x 正负号反了，抽屉从错误的边滑出；桌面上菜单消失，因为开关在断点之上被隐藏，但导航链接没再出现。症状是：
In code代码里叫什么
| Framework框架 | Symbol符号 | Note说明 |
|---|---|---|
| ARIA | aria-expanded + aria-controls | the toggle button's contract开关按钮的契约 |
| HTML | <nav> | the drawer content is navigation抽屉里的内容是导航 |
| shadcn/ui | Sheet side="left" | the usual React building blockReact 里常用的积木 |
| Material | NavigationDrawer | Android/Material's name for the panelAndroid/Material 对这个面板的称呼 |