15

In mobile applications, many times you have the main content taking up the entire screen but there is a settings page also. To reach the settings page you can to put your finger on the left or right and swipe to the center.

For example in Google Maps on Android, when you put your finger on the left edge of the screen and swipe right you get a GUI widget. On the widget, you can then change settings like enable satellite imagery, enable traffic, etc etc. Then when you are done with the settings and wish to return to the application's content you swipe from right to left to close the settings widget.

What do you call this GUI widget that slides out from the left or right?

  • ... I didn't know that you could just swipe to open the settings on Google Maps. Always pushed the "hamburger" instead... – Bakuriu Oct 6 '16 at 11:37
27

I believe you are referencing a Navigation Drawer.

  • indeed it is :) – Devin Oct 5 '16 at 16:35
  • 1
    +1. More generically, the pattern is also called "off-canvas." – Nate Green Oct 5 '16 at 16:35
  • 2
    Slide In Panel is another generic term for this, while not being quite that generic. – Geobits Oct 5 '16 at 19:31
  • I prefer slide in panel or perhaps hidden sidebar, since they aren't always about navigation. E.g. the right hand panel on stack mobile is more a report with links than a nav imo. Plain sidebar have been a desktop browser thing for ages. Blender has toggleable panels on either side of the main view that feel related too, can't remember what they call them. – StarWeaver Oct 6 '16 at 15:23
12

All the product owners I have interacted with have called this either a fly-out nav or, less formally, a hamburger menu. Although w3 considers fly-outs to be more akin to header drop-down menus: W3 Fly-out Menus

It's usually punctuated with the hamburger looking menu icon and supports slide gestures when available as you described.

Consider this gallery of hamburger menus on vtldesign and the sample image below:

Collapsed

Sample Hamburger Menu Collapsed

Expanded

Sample Hamburger Menu Expanded

0

On TED, we refer to the left / right slide-in menus as Shoji menus, after the Japanese sliding panels found IRL. You can see them on our site by collapsing the viewport, or this example at Bootsnipp.

You can see a screenshot below:

enter image description here

  • I like the name, but sadly it has poor recognition on Google -- the first result for shoji menu is a sushi restaurant, and even shoji menu UI has poor results. The person you are communicating with will likely have a hard time understanding you, at least until this term spreads a bit. – xjcl Oct 16 '17 at 9:07
-3

It may be a Carousel (but be aware of those - http://uxmovement.com/navigation/big-usability-mistakes-designers-make-on-carousels/).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.