Drawer

  • Revision slug: Mozilla/Firefox_OS/UX/Patterns/Drawer
  • Revision title: Drawer
  • Revision id: 363463
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment

Revision Content

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

Revision Source

<p>Drawers provide access to top-level navigation options that may be too numerous for a <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Tabs" title="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Tabs">tabs</a> or <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Toolbar" title="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Toolbar">toolbar</a> 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 <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Patterns/Drawer/Coding" title="/en-US/docs/Mozilla/Firefox_OS/UX/Patterns/Drawer/Coding">Coding guide</a> for details on implementing drawers in your apps.</p>
<h2 id="Characteristics">Characteristics</h2>
<ul>
  <li>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.</li>
  <li>Drawers can also be used to provide access to secondary or "power-user" features.</li>
  <li>Drawers should be positioned on the left side of the screen.</li>
  <li>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.</li>
  <li>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.</li>
  <li>Drawers are usually depicted as being one layer behind the primary interface.</li>
  <li>Drawers are of variable width; however, enough room must be left for the drawer button on the primary interface to remain fully visible.</li>
</ul>
<h2 id="Visuals">Visuals</h2>
<table class="fxosScreenGrid">
  <tbody>
    <tr>
      <td style="vertical-align: top;">
        <h3 id="Opened_drawer">Opened drawer</h3>
        <p><img alt="" src="https://mdn.mozillademos.org/files/5000/drawer-normal.png" style="width: 320px; height: 460px;" /></p>
        <p>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.</p>
      </td>
      <td style="vertical-align: top;">
        <h3 id="Drawer_with_an_item_pressed">Drawer with an item pressed</h3>
        <p><img alt="" src="https://mdn.mozillademos.org/files/5002/drawer-pressed.png" /></p>
        <p>In this screenshot, the user has tapped on one of the items, and it is highlighted.</p>
      </td>
    </tr>
  </tbody>
</table>
<h2 id="See_also">See also</h2>
<ul>
  <li>Drawer coding guide</li>
  <li><a href="/en-US/docs/Mozilla/Firefox_OS/UX" title="/en-US/docs/Mozilla/Firefox_OS/UX">Firefox OS user experience</a></li>
</ul>
Revert to this revision