Hamburger menu 汉堡菜单
/HAM-bur-gur MEN-yoo/ · noun · 导航类模式 · #051
三条横线，把整套导航藏进一次点击里。省下了空间，赔上了可发现性——藏起来的东西就是没人看。
别名：三条横线图标、三横线图标、汉堡菜单图标、导航抽屉、抽屉式菜单。
你可能会这样叫它
- “三条横线的菜单按钮”
- “左上角三条杠”
- “点开会滑出侧边菜单的图标”
- “三道杠图标”
- “网站右上角的菜单按钮”
……它的名字是 汉堡菜单（Hamburger menu）。
常见问题
App 里三条横线是什么图标？
那是汉堡菜单（Hamburger menu）：三条横线叠在一起，点开才展开整套隐藏的导航。名字来自「面包-肉饼-面包」的汉堡剖面。
汉堡菜单是什么意思？
汉堡菜单指用三条横线图标把整套导航收进一次点击的设计模式。省下了空间，赔上了可发现性——藏起来的东西就是没人看。
导航抽屉是什么？
导航抽屉（Navigation drawer）是点了汉堡菜单后从屏幕侧边滑出的导航面板，里面列着 App 的主要页面，点外面或往回滑就收起。三条横线的按钮本身叫汉堡菜单，两者合起来是一个设计模式，也常叫抽屉式菜单或侧滑菜单。Material 3 在 2025 年的更新里已不再推荐它，改推展开的导航栏（expanded navigation rail）。它和 Android 上放全部 App 的“应用抽屉”不是一回事。
代码里叫什么
| SwiftUI / UIKit | NavigationSplitView 没有汉堡菜单组件，Apple 更推荐标签栏或侧边栏 |
|---|---|
| Jetpack Compose | ModalNavigationDrawer Icons.Filled.Menu |
| Android (Views) | DrawerLayout NavigationView ActionBarDrawerToggle |
| Flutter | Scaffold(drawer:) NavigationDrawer Drawer Icons.menu |
| React Native (React Navigation) | createDrawerNavigator() |
| Web (HTML / ARIA) | <button aria-expanded> <nav> |
复制给 AI 编程工具
为小屏加一个汉堡菜单：页头放一个三条横线的菜单按钮，点开后主导航从侧边滑出。按钮要有无障碍名称（“菜单”），并用 aria-expanded 反映开合状态；打开时压暗背后的页面，焦点移进面板，按 Esc、点关闭按钮或点外面都能关闭，关闭后焦点回到按钮。最重要的一两个入口保留在菜单外面直接可见。