Hamburger Menu

A hamburger menu is a three-line button that opens a hidden navigation panel when tapped or clicked. The three short horizontal lines, stacked one above another, act as a compact stand-in for a full menu, tucking the site's navigation out of sight until the user asks for it. It is most familiar from mobile interfaces, where screen space is scarce and a row of navigation links would either crowd the layout or not fit at all, so the links are collapsed behind a single small control usually placed in a top corner.

A hamburger menu works by hiding navigation until it is requested and revealing it on demand. In its resting state only the icon shows. When the user activates it, a panel appears, sliding in from the side, dropping down from the top, or covering the screen, to expose the full list of links, and activating it again or tapping outside closes the panel. Under the hood this is a toggle between a hidden and a visible state, implemented with a small amount of scripting or CSS, and accessible versions announce whether the menu is open or closed, can be operated by keyboard, and move focus sensibly so people using assistive technology are not left stranded. The trade-off at the heart of the pattern is space for visibility: it reclaims valuable screen real estate at the cost of putting navigation one step further away.

The name comes from the icon's resemblance to a hamburger, with the top and bottom lines as the buns and the middle line as the patty. The three-line glyph is older than the phones that popularized it; it appeared in some of the earliest graphical user interfaces in the 1980s as a compact way to represent a list. It faded for years and then returned to prominence with the rise of smartphones, when designers urgently needed a way to fit desktop-sized navigation into tiny screens, and the little stacked-lines button became a near-universal convention.

For a business, a hamburger menu matters because it keeps mobile layouts clean while still offering full navigation. On a small screen, a tidy interface that foregrounds content and a clear call to action often converts better than one cluttered with links, and the hamburger lets a site hide secondary navigation without removing it. Because the icon is now widely recognized, most users understand that tapping it reveals the menu, which makes it a dependable, space-efficient solution for responsive sites and apps.

The most common criticism is that hidden navigation is used less than visible navigation, because links that are out of sight are also out of mind. For that reason, many designers keep the single most important action, such as a signup or contact button, visible outside the hamburger and reserve the collapsed menu for secondary links. Using a hamburger menu on a spacious desktop layout where the links would comfortably fit is another frequent mistake, since it hides navigation for no reason. Poor accessibility, where the control cannot be reached by keyboard or does not announce its state, is a serious flaw. The hamburger menu relates to adjacent patterns: it is the small-screen counterpart to a mega menu, it usually lives inside a sticky header so it stays reachable while scrolling, and the panel it opens often behaves like a modal that temporarily takes over the screen.