component · navigation
Hamburger menu
also called doner menu, burger (mantine), hamburger button, nav toggle
A button of three stacked horizontal lines that opens a site's main navigation, usually in a panel over the page.
Three lines, and everyone knows what happens when you press it. That recognition is real, and it is the strongest argument for the pattern: on a phone there is no room for a nav bar, and the alternative is a screen that begins with a list of links.
The cost is equally well documented. Navigation you cannot see gets used less, so anything behind the hamburger is effectively demoted. The usual compromise is to promote three or four destinations into a visible bar and leave the long tail in the panel.
It is not a kebab menu. Lines mean places to go; dots mean things to do to the item next to them. Swapping the two is one of the most common vocabulary mistakes in interface work, and it produces menus that surprise people.
Which word?
| If you want | say |
|---|---|
| the three-line button that opens the whole navigation | hamburger menu |
| extra actions behind three stacked dots | kebab menu |
| extra actions behind three dots lying sideways | meatball menu |
Related
Part of: App bar
See also: Drawer · Navigation bar · Icon morph · Priority plus navigation
Implementations
Specimens illustrate the concept; for production use, start here.
| material | Navigation drawer |