Contents
It’s true that hamburger menus make the most sense when they are used in a mobile setting because of the lack of screen space. However, in the cases of Reddit and YouTube, using a hamburger menu on their desktop versions are more effective because of the enormous amount of content each site contains.
For left-to-right languages, hamburger menus should be placed at the top left corner of the screen. This means that the navigation drawer or side menu will also open from the left side of the screen. Navigation drawer on Android. Image credit Material Design.
What does the hamburger menu look like?
The hamburger menu or hamburger icon is a name given to the menu icon found in newer programs and websites that hides the traditional file menu. The icon gets its name because it looks like a top and bottom bun with a meat patty between them; a hamburger.
For the mobile design, it recommends using a visible navigation if you have four or fewer top-level navigation links. Many times when the Hamburger Menu is discussed online, TechCrunch’s article Kill the Hamburger Button is referenced. This article focuses on usage of the hamburger menu in mobile app interface design.
Most – but not all – hamburger menus are found on responsive websites when the viewer’s screen size reaches a certain point. Once this happens, the navigation menu converts into a hamburger icon to save space. The hamburger menu design varies very little across responsive websites. Here it is on Blue Coda’s website, in the upper right corner.
How many icons are in the hamburger menu?
The six navigation elements (search bar, hamburger menu, email, social media, scroll button, and logo) are pared down to only three on the mobile version: the logo, hamburger menu, and bottom scroll button. The mobile version has fewer navigation icons because of the smaller screen size.
Another alternative to the hamburger menu is the responsive navigation menu – or the menu that responds (or changes) based on the viewer’s screen size. The adidas website uses a fully visible website navigation on its desktop version, as seen here: