Drawer

A panel that slides in from an edge of the screen, over the content, opened by a button. The person uses it, closes it, and returns where they were.

On this page

Playground

Edge

Footer

Background

HTML

<button class="feitio-button" type="button" popovertarget="pg-drawer">Open the panel</button><div class="feitio-drawer" id="pg-drawer" popover role="dialog" aria-label="Filters"><div class="drawer-header"><h2>Filters</h2><button type="button" class="feitio-button close" data-size="small" popovertarget="pg-drawer" popovertargetaction="hide"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-close"></use></svg>Close</button></div><div class="drawer-body"><p>The list’s filters.</p></div></div>

When to use

For the product navigation on mobile (the AppShell).
For a list’s filters on mobile, or an item’s details without leaving the list.

When not to use

To confirm: Dialog.
A long form: a page.
A drawer opening another: never.

Examples

From any edge

Right (the default), left, top or bottom. Title and footer are optional; the small Close is always there. It closes with Esc or a tap outside.

Show code

HTML

<button type="button" class="feitio-button" popovertarget="filtros">…Filtros</button>
<div class="feitio-drawer" id="filtros" popover role="dialog" aria-labelledby="filtros-t">
  <div class="drawer-header">
    <h2 id="filtros-t">Filtros</h2>                       <!-- opcional -->
    <button type="button" class="feitio-button close" data-size="small" popovertarget="filtros" popovertargetaction="hide">…Fechar</button>
  </div>
  <div class="drawer-body">…</div>
  <div class="drawer-footer">…</div>                      <!-- opcional -->
</div>

Anatomy

What the drawer holds.

Header: the title, optional, and the small Close in the corner.
Body: the content; it scrolls on its own.
Footer, optional: the action, outside the scroll.

States

Opening and closing: it slides, and the background dims.
Open: Esc, Close or a tap outside close it; focus returns to the opening button.
Closed: takes no space and no focus.

Do and don’t

Filters in a drawer, with the action saying the result: "Show 12 results".

The person knows what happens before closing.

Don’t

"Are you sure you want to delete?" inside a drawer.

A drawer closes with a tap outside; a decision cannot be accidental.

The button points to the drawer (popovertarget); the browser says whether it is open.
The drawer has a name: the title, or aria-label without one.

Attributes

Attribute	Values	What for
`class="feitio-drawer"` + `popover`	required	The drawer, off screen until opened.
`data-side`	`"end"`, `"start"`, `"top"`, `"bottom"`	Which edge it enters from.
`class="drawer-header"`, `"drawer-body"`, `"drawer-footer"`	the parts	Header, body and footer (optional).