Drawer

The Drawer pattern allows the user to open and/or switch between different application features. A Drawer primarily displays a menu of navigation options, which can show additional features including: search, profile, notifications, branding, etc.

Benefits of using Drawer:

Provides quick access to every category.
Provides an overview of application content.

This pattern is common for phone and tablet, with growing adoption for desktop usage.

Appearance

Appearance characteristics for this pattern.

Support: The default Drawer displays a list of the application's features.
Placement: The Drawer typically slides in and out from the left of the display. While rare, Drawers can also appear on the right, top or bottom of a display.
Top Area: Application names, global searches and user profiles may display at the top of a Drawer.
Profile: User profile information (i.e. a photo/avatar and name) can be placed at the top of the Drawer, below search.
Search: Near the top of the Drawer a Search textbox can be displayed. Refer to the Search pattern for additional appearance details. When a large avatar is used, the search textbox can be hidden until needed.
Bottom Area: Branding, sign out and other notices may display at the bottom of the Drawer.
Branding: The white Oracle logo may display at the bottom of the Drawer. Other product naming may display at the bottom.
Item Layout: Inside a list item the icons are left aligned, with the feature names appearing, left aligned, to the right of the icon.
Drill Item: On the right side of a list item, an optional caret/arrow can be displayed to indicate that item can be drilled in on. A contextual menu is displayed when an item is drilled in on.
Contextual Menu: There will be a header on the contextual menu, with a back button and a title with the name of the section that has been drilled into.
Width: The width of the Drawer can be customized. This determines how much of the page will be 'pushed'. This allows the Drawer to appear at the specified width in both landscape and portrait.
Page View: Since the Drawer width can be defined, the page may be 'pushed' slightly, most of the way, all of the way or not 'pushed' at all.
List Headers: List headers display above grouped sets of list items. This maybe used in custom implementations.
Icons: Drawer icons are functional and mono chromatic.
Badge/Bubble: No default count bubbles or badges are available. Custom implementation could be done to support count bubbles or badges.

Behavior

Common behaviors for this pattern.

Selection: The Drawer list is tappable. When tapping the list item, the underlying page will change to the selected content.The Drawer will slide off screen allowing page content to expand.
Orientation: On device orientation change the Drawer will not change the layout. Custom implementation could be done to support layout changes. A swipe gesture can open or close the menu.
Placement: The Drawer will push or slide over a page (either fully or partially) when it shows and hides. Custom implementation could be done to support adjustable placement.
Scrolling: Vertical scrolling of the Drawer contents, though discouraged, can be allowed. Horizontal scrolling should not occur.
Search: When a big avatar is used, the search icon maybe place in the upper right of the Drawer. Tapping it will replace Drawer with Search textbox.
Drilling: Tapping a Drawer list item that has drill capability, will display a contextual menu in place of the top level Drawer.
Contextual Menu: Tapping the Back button in the Contextual Header will navigate the user back to the top level of the Drawer.
Gestures: There are no directly available gestures to manipulate the Drawer. Custom implementation could be done to support gestures.
- For example in landscape orientation the full list may show, when changing to portrait orientation the Drawer may either hide the list or show the icon list.

Usage

Usage guidelines for this pattern.

Drawers provide quick access to different features and provide an overview of an application.
Due to the complexity of navigation, it is not recommended to use a Navigation Bar with a Drawer.
Do not use combinations of of different Drawers across the application.
If there are too few or too many features across an application, a Drawer is not recommend. An alternate method should be used instead.
Pagination dots should be used on grid Drawers when there are more than one Drawer view.
Typically, Drawers can support up to 9 categories without scrolling.
It is advised to apply Drawer design pattern to your mobile app, when your app is content-focused.
Contextual menus in the Drawer should be used sparingly. Avoid drilling more than one level down.

Used On: Phone, Tablet
Also Called: Navigational Drawer, Side Drawer, Off Canvas, Side Bar, Sliding Menu
Related Components: List View, Text, Textbox
Related Patterns: Master Detail, Navigation Bar, Navigation Menu
Resources: Android Navigation Drawer , JET FixItFast Demo