Screenshot taken May 2, 2018Īs a comparison, here is a hamburger menu on. Unlike the Blue Coda menu design which is flush against the upper corner, AGET’s design floats the menu in white space. This hamburger menu design places black bars on top of a gray square. Here’s an example of a similar menu design on AGET Manufacturing’s website. It is three black bars against a white background. The design for the WSJ website places the hamburger menu in the upper left corner. Very similar in design is the hamburger menu for The Wall Street Journal. Here it is on Blue Coda’s website, in the upper right corner. The website is responsive, so this is what the website looks like on a small screen (like your smart phone).īlue Coda’s hamburger menu is charcoal gray placed on top of a light gray square. The hamburger menu design varies very little across responsive websites. Once this happens, the navigation menu converts into a hamburger icon to save space. Most – but not all – hamburger menus are found on responsive websites when the viewer’s screen size reaches a certain point. Examples of Hamburger Menus in Web Design You can call it the Options Button, Hamburger Button, Hamburger Option, or Hamburger Icon, too. Here’s an example of a hamburger menu on Artonic’s website.Ī hamburger menu is called many things, including: Visually, it’s a stack of three horizontal lines resembling a hamburger – top bun, patty, bottom bun. A hamburger menu is an icon used on a website that, when clicked, opens to reveal a navigation menu.

Hamburger stack menu bootstrap