Pinterest
Landscape mobile mega menu dropdown in place of portrait mobile hamburger.

Landscape mobile mega menu dropdown in place of portrait mobile hamburger.

Label-less hamburger icon in outline ghost button.

Label-less hamburger icon in outline ghost button.

Hamburger basement. Login and Create Account buttons. Shop category expanded by default, subcategories shown.

Hamburger basement. Login and Create Account buttons. Shop category expanded by default, subcategories shown.

Hamburgers

Hamburgers

Collapsed Shop category. Footer basement links. Store locator link. Language selector.

Collapsed Shop category. Footer basement links. Store locator link. Language selector.

Hamburgers

Include an emergency exit for your hamburger menu. While there is a dedicated "Close" button at the bottom of this menu, tapping the hamburger again reloads the page, which is an unpleasant surprise.

Include an emergency exit for your hamburger menu. While there is a dedicated "Close" button at the bottom of this menu, tapping the hamburger again reloads the page, which is an unpleasant surprise.

Boxes and arrows uses a page link to the footer. When footers contain the same items as the menu, this approach saves redundant text and ditches JavaScript.   The menu is too short for the top of the menu to align with the top of the screen, so you may wonder why you’ve been scrolled to an odd position on the page. Conversely, if the menu were tall enough to align, you may miss the context provided by the page content to orient you.  There is no emergency exit to return to the top of the…

Boxes and arrows uses a page link to the footer. When footers contain the same items as the menu, this approach saves redundant text and ditches JavaScript. The menu is too short for the top of the menu to align with the top of the screen, so you may wonder why you’ve been scrolled to an odd position on the page. Conversely, if the menu were tall enough to align, you may miss the context provided by the page content to orient you. There is no emergency exit to return to the top of the…

Oddly, Designer News’s hamburger menu contains a single-row, sideways-scrolling menu

Oddly, Designer News’s hamburger menu contains a single-row, sideways-scrolling menu

Stacksocial have a hamburger-icon-styled logo, which appears in a commonly used hamburger location (top–left). The actual menu, however, appears in the top–right. They provide a scrollable overlay for a collapsible and expandable accordion menu, which happily supports landscape oriented phones. Notice the scroll bar, indicating scroll progress alternately for the hamburger menu then the page behind as it inconsistently captures scroll focus.

Stacksocial have a hamburger-icon-styled logo, which appears in a commonly used hamburger location (top–left). The actual menu, however, appears in the top–right. They provide a scrollable overlay for a collapsible and expandable accordion menu, which happily supports landscape oriented phones. Notice the scroll bar, indicating scroll progress alternately for the hamburger menu then the page behind as it inconsistently captures scroll focus.

This hamburger lets you continue interacting with the page behind the menu. While doing so, the menu slides awkwardly sideways at the same time, but not in the same proportion. (Thumb is in the page area, thumbing sideways.)

This hamburger lets you continue interacting with the page behind the menu. While doing so, the menu slides awkwardly sideways at the same time, but not in the same proportion. (Thumb is in the page area, thumbing sideways.)

You can see awkward scroll focus occurring here. The page behind the transparent menu scrolls when you thumb down. Imagine when you close the menu and find the page has moved!

You can see awkward scroll focus occurring here. The page behind the transparent menu scrolls when you thumb down. Imagine when you close the menu and find the page has moved!