If you're working on a website design, it's recommended to place hamburger icons in the top left corner of a page. In the western world, users start to scan a page from left to right, and the hamburger menu will be the first thing they notice.
- Why is the hamburger menu on left side?
- Why hamburger icon is semantically correct?
- How do you handle a hamburger menu?
- How do you use a hamburger icon?
Why is the hamburger menu on left side?
The hamburger menu icon was first introduced in the early days of the web (when we did not design for mobile screens), and it was usually placed in the top-left corner of the screen. This was because the top-left corner was the traditional location for the menu bar.
Why hamburger icon is semantically correct?
The hamburger icon is easily scaleable and it fits cleanly into a pixel grid. It was originally a list icon that has been press-ganged into its current role, but since a menu is simply a list of options, it's semantically correct to use the list item in this way.
How do you handle a hamburger menu?
The hamburger menu placement on the screen is the exact same as the default for the back button: the top left corner. When both icons are needed, you'll either have to squeeze both of them in next to each other, or sacrifice some usability by deleting one.
How do you use a hamburger icon?
You will find it in the form of an icon with three horizontal lines at the top corner of the screen on apps and responsive websites. Once you click that icon, it will reveal hidden navigation with menu options that will grant you direct access to their respective pages.