Skip to content
v1.0
Components

Drawer

A full-height side sheet over a scrim, for workflows too big for a popover and too contextual for a page — this site's own narrow-viewport navigation is one.

Live

Open one and press Escape, then Tab around. The focus trap, the inert background and the scrim are the platform's.
Code 
<GdDrawer v-model:open="open" title="Layers" width="340px">
  …
  <template #footer>
    <GdButton variant="ghost" @click="open = false">Reset</GdButton>
    <GdButton variant="primary">Apply</GdButton>
  </template>
</GdDrawer>

Saved parcel

42 Jarrah StreetL14 RP80432 · 812 m²
Building + council

A standard council check against the written rulebook.

Decided by Riverton City Council Typically 6–12 weeks

Layers

API

Props

PropTypeDefault
openrequiredboolean—

Whether the sheet is showing, as `v-model:open`. Escape and a click on the scrim both write `false` back.

titlestring—

The heading in the head bar, and the sheet's accessible name via `aria-labelledby`. Without it the sheet has no name — use the `header` slot only when you are supplying one another way.

side"right" | "left""right"

Which edge it parks against. The rule and the enter animation follow it.

widthstring"400px"

Any CSS length. The rendered width is `min(width, 92vw)`, so a wide sheet still leaves the page visible on a phone.

Slots

default

The body. It is the only part that scrolls; the head and footer stay put.

header

Extra head-bar content beside the title — a count, a chip, a segmented control.

footer

A pinned action row, right-aligned. Not rendered when empty.

Events

close

The PLATFORM closed the sheet — Escape — and the component wrote `open` back to false so the two cannot desync. The close button and a scrim click set `open` directly and do not emit this.

Usage Guidelines

  • Use a drawer for a workflow: filters, settings, a saved parcel's detail, navigation on a phone.
  • Use a dialog when the user is about to lose something. Centred, small, one decision.
  • Use a popover for an explanation, anchored to the thing it explains.
  • Always pass title unless you are naming the sheet another way — an unnamed sheet is an unnamed region.
  • Put actions in #footer, not at the bottom of the body, so they stay reachable while the body scrolls.
  • Keep width near the default. A sheet wide enough to hide the map is a page that should have been routed to.

Behavior & Anatomy

Built on the native <dialog> exactly as GdDialog is — the platform's focus trap, inert background, Escape and scrim, with the geometry changed. Enter is the big-surface grammar (emphasized-decelerate, 400ms); exit is instant, because a dismissed sheet should be gone, not performing.

Drawer, dialog or popover

  • Dialog — the user is about to lose something. Centred, small, one decision.
  • Drawer — a workflow: filters, settings, a saved parcel's detail, navigation on a phone.
  • Popover — an explanation, anchored to the thing it explains.

Navigate

Esc