Hamburger menu
/HAM-bur-gur MEN-yoo/ · noun · NAV pattern · #051
Three stacked lines hiding the whole navigation behind one tap. Saves space, costs discoverability — everything inside is out of sight.
Also called: hamburger icon, three-line menu, menu icon, navigation drawer, nav drawer, drawer menu.
You might call it
- “the three lines menu icon”
- “the menu button with three lines”
- “the three lines on a website”
- “the 3 lines icon in the corner”
- “the side menu that slides out”
…its name is Hamburger menu.
Common questions
What are the three horizontal lines in an app called?
That icon is the hamburger menu (or hamburger icon): three stacked lines that open the app’s hidden navigation. The name comes from its resemblance to a bun-patty-bun.
What is a hamburger menu?
The three-line icon (☰) that opens a hidden navigation menu, often a panel sliding in from the side. It saves space on small screens but hides the options, so apps often show their main destinations in a tab bar instead.
What is a navigation drawer?
The panel that slides in from the side when you tap the hamburger menu, listing the app’s main destinations. The name is Material Design’s: ModalNavigationDrawer in Compose, DrawerLayout with NavigationView in Android views, NavigationDrawer in Flutter, createDrawerNavigator() in React Navigation. Since 2025 Material recommends an expanded navigation rail instead. SwiftUI and UIKit have no drawer.
In code
| SwiftUI / UIKit | NavigationSplitView No hamburger component — Apple prefers a tab bar or a sidebar |
|---|---|
| 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> |
Prompt for your AI coding tool
Add a hamburger menu for small screens: a three-line menu button in the header that opens the main navigation in a panel sliding in from the side. The button has an accessible label (“Menu”) and reflects its state with aria-expanded; while open, the page behind is dimmed, focus moves into the panel, and Escape, the close button or tapping outside closes it and returns focus to the button. Keep the most important one or two destinations visible outside the menu.
More UI words to use when vibe coding →