# 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.

## Playground

```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

1.  **Header:** the title, optional, and the small Close in the corner.
2.  **Body:** the content; it scrolls on its own.
3.  **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

Do

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.

## Accessibility

-   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).