Important: This information is out of date; for up-to-date information on using these design patterns, as implemented in Firefox OS building blocks, go to our Firefox OS building blocks page.
Drawers provide access to top-level navigation options that may be too numerous for a tabs or toolbar interface. Drawers can also be used to access user-generated content such as browser tabs, accounts in an email or messaging client, and so forth. Drawers slide out from the edge of the screen at the user's request (pushing the underlying content aside), then slide back out of the way when no longer needed. See the Coding guide for details on implementing drawers in your apps.
Characteristics
- Drawers provide access to top-level navigation links that are usually user-configurable. For example, these are used for accessing accounts in the Email and Calendar apps, and for the list of open tabs in the Browser app.
- Drawers can also be used to provide access to secondary or "power-user" features.
- Drawers should be positioned on the left side of the screen.
- To open a drawer, the user taps the standard "drawer" button. The drawer then slides in from the left side of the display, pushing aside the content below.
- The drawer is closed when the user either taps the "drawer" button again, or anywhere on the visible area of the underlying primary interface. The drawer then slides off the screen to the left, pulling the primary content back into its usual position behind it.
- Drawers are usually depicted as being one layer behind the primary interface.
- Drawers are of variable width; however, enough room must be left for the drawer button on the primary interface to remain fully visible.
Visuals
Opened drawer
In this image, you see an opened drawer. It has a title, a number of options to choose from, and a button to add more items to the list. |
Drawer with an item pressed
In this screenshot, the user has tapped on one of the items, and it is highlighted. |
See also
- Drawer coding guide
- Firefox OS user experience