mozilla

Revision 360502 of Drawer

  • Revision slug: Mozilla/Firefox_OS/UX/Patterns/Drawer
  • Revision title: Drawer
  • Revision id: 360502
  • 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.

Characteristics

Visuals

Opened drawer

Drawer with an item pressed

Interaction

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.</p>
<h2>Characteristics</h2>
<h2>Visuals</h2>
<table class="fxosScreenGrid">
  <tbody>
    <tr>
      <td style="vertical-align: top;">
        <h3>Opened drawer</h3>
        <p><img alt="" src="https://mdn.mozillademos.org/files/5000/drawer-normal.png" style="width: 320px; height: 460px;" /></p>
      </td>
      <td style="vertical-align: top;">
        <h3>Drawer with an item pressed</h3>
        <p><img alt="" src="https://mdn.mozillademos.org/files/5002/drawer-pressed.png" /></p>
      </td>
    </tr>
  </tbody>
</table>
<h2>Interaction</h2>
<h2>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