The ☰ three-line button is the hamburger — the panel it slid open is the navigation drawer
Hamburger Menu (Nav Drawer)
/ aria-expanded + aria-controls · <nav> /
also called navigation drawer, hamburger button, side menu, off-canvas menu
“The three horizontal lines used to open a menu” are a hamburger button, and the panel it slides open is a navigation drawer. The button is just the trigger — three stacked lines, usually top-left on phones; the drawer is an off-canvas <nav> that slides over the page above a scrim. The icon's siblings (dots, ellipsis) live under The Three Dots; this page is the icon-plus-drawer navigation pattern itself.
If you called it…
…you meant a hamburger menu (nav drawer).
Anatomy — every part, named
Prompt — paste into your agent
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.
Debug prompt — when it misbehaves
Paste this, then describe what you’re seeing — it hands your agent the classic failure modes to rule out first.
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:
In code
The exact names this thing goes by in code — each row is one framework’s word for it. Use the row that matches your project (or paste it into your prompt).
| 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 block |
| Material | NavigationDrawer | Android/Material's name for the panel |