16

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?

Improve this question
1
  • ... I didn't know that you could just swipe to open the settings on Google Maps. Always pushed the "hamburger" instead...
    – Bakuriu
    Commented Oct 6, 2016 at 11:37

4 Answers 4

Reset to default
28

I believe you are referencing a Navigation Drawer.

Improve this answer
4
  • indeed it is :)
    – Devin
    Commented Oct 5, 2016 at 16:35
  • 1
    +1. More generically, the pattern is also called "off-canvas."
    – Nate Green
    Commented Oct 5, 2016 at 16:35
  • 2
    Slide In Panel is another generic term for this, while not being quite that generic.
    – Geobits
    Commented Oct 5, 2016 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.
    – Weaver
    Commented Oct 6, 2016 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

Improve this answer
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

Improve this answer
1
  • 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
    Commented Oct 16, 2017 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/).

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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