Hamburger vs. Kebab
A three-line button opens navigation. A three-dot button opens more actions for a nearby item.
Use three lines for hidden navigation, mostly on small screens. Use three dots when extra item actions do not fit, and name the button “More actions.”
See what each pattern does
Try each example. Then read about the job it is made to do.
Hamburger Menu
A menu button with three lines. It opens the site's main navigation when there is not enough room to show it.
On a narrow shop page, the labeled Menu button opens categories, account, and help. The drawer keeps focus inside.
- Use it when
- Use it on small screens after keeping the most important destinations visible.
- Do not use it when
- Do not hide all navigation on wide screens. The icon also needs an accessible name and an expanded state.
- Name used in code
button aria-controls aria-expanded + nav
Overflow Menu Button
A small button, often shown as three dots, opens less important actions. Use it when those actions do not fit on the page.
Each project row shows Open. Duplicate, Archive, and Delete stay in its overflow menu.
- Use it when
- Use it when one item has several secondary actions and showing every button would crowd the page.
- Do not use it when
- Do not hide the main action or a destructive result behind an unlabeled icon. Keep the only path to a common task visible.
- Name used in code
button[aria-haspopup=menu] + role=menu
Quick comparison
| UI pattern | Best for | Not for | Name used in code |
|---|---|---|---|
| Hamburger Menu | Use it on small screens after keeping the most important destinations visible. | Do not hide all navigation on wide screens. The icon also needs an accessible name and an expanded state. | button aria-controls aria-expanded + nav |
| Overflow Menu Button | Use it when one item has several secondary actions and showing every button would crowd the page. | Do not hide the main action or a destructive result behind an unlabeled icon. Keep the only path to a common task visible. | button[aria-haspopup=menu] + role=menu |
Before you ship
- 01
Write down what the person needs to do.
- 02
Test the keyboard, focus, touch, zoom, loading, empty, and error states.
- 03
Make sure people can get the same information without hover or motion.
- 04
Test with real content on both small and large screens.
Comparison request you can copy
Copy this when your team needs help choosing between the patterns.
Choose the best pattern from Hamburger Menu, Overflow Menu Button for our real user flow. Use this rule: A three-line button opens navigation. A three-dot button opens more actions for a nearby item. Write down the task, amount of content, and cost of stopping the flow. Check keyboard, touch, loading, error, and reduced-motion behavior. Explain your choice, then build the smallest accessible version with the project's design system.