Drawer#

The edge panel — navigation, filters, a cart — on the same native <dialog> machinery as Dialog: the top layer instead of a Portal, showModal() for focus trapping, Escape and focus restore, and a ::backdrop pseudo part. What is the drawer's own is the edge: the panel declares data-placement="start|end" from the logical pair, so a navigation drawer sits at the reading start in both directions and RTL mirrors for free.

Import#

import { Drawer } from '@sigx/zero/drawer';

Drawer is a compound: Drawer.Root, Drawer.Trigger, Drawer.Panel, Drawer.Title, Drawer.Close. It is also re-exported from the @sigx/zero root, together with drawerAnatomy, useDrawerContext and the DrawerPlacement type.

Usage#

import { component } from 'sigx';
import { Drawer } from '@sigx/zero/drawer';

const SiteNav = component(({ signal }) => {
    const state = signal({ open: false });

    return () => (
        <Drawer.Root model={() => state.open} label="Site navigation">
            <Drawer.Trigger color="neutral">Menu</Drawer.Trigger>
            <Drawer.Panel>
                <Drawer.Title>Navigation</Drawer.Title>
                <nav>…</nav>
                <Drawer.Close>Close</Drawer.Close>
            </Drawer.Panel>
        </Drawer.Root>
    );
});

model={() => state.open} binds the open state both ways. Leave the model off and pass defaultOpen to keep the state inside the component; openChange fires either way. See Models. Drawer.Root renders no element of its own — it only provides context — so the trigger and the panel can sit anywhere in the tree below it. The panel is rendered closed in place and lifted into the top layer when it opens; there is no Portal and no z-index to manage.

The end edge#

<Drawer.Root model={() => state.cart} placement="end" label="Shopping cart">

placement is the logical pair start (default) or end, stamped as data-placement on the panel. A recipe pins the panel with inset-inline-start: 0 / inset-inline-end: 0 — never left / right — and the layout mirrors under dir="rtl" with no further rule.

Inline (non-modal)#

<Drawer.Root model={() => state.filters} modal={false}>

modal={false} opens with show() instead of showModal(): the panel renders in flow, the page beside it stays interactive, and there is no backdrop. Clicks elsewhere are a non-event — an inline drawer is furniture that survives them — while Escape still closes it, under dismissible, through zero's dismiss layer. show() provides no focus restore either, so zero covers that itself on close.

Naming a drawer without a heading#

A drawer often has no visible heading. label on the root becomes the panel's aria-label whenever no Drawer.Title is rendered; while a title is present, the panel is labelled by it instead and label is not rendered. Give every drawer one or the other.

Or keep the title and hide it: Drawer.Title visuallyHidden stays in the accessibility tree — it still names the panel through aria-labelledby — and leaves the screen, which is the usual shape for a navigation sheet in an app shell:

<Drawer.Panel measure="xs">
    <Drawer.Title visuallyHidden>Navigation</Drawer.Title>
    <nav>…</nav>
</Drawer.Panel>

Panel width#

measure on Drawer.Panel sizes the panel from the design system's --measure-* ramp: xs, sm, md, lg, xl, prose or full. It is the same measure layout attribute Container uses — rendered as data-l-measure — not the size axis, which rides the trigger and cannot reach a panel that is not inside it. The measure is a cap: the panel fills the space it is given up to it — its container inline, the viewport as a modal sheet — so measure="full" is a full-screen sheet. Unset, each design system's own drawer width applies. Every shipped skin sizes the panel box-sizing: border-box, so its padding never pushes it past the measure.

Why it closed#

The close event follows openChange(false) once per close with a DrawerCloseDetail — { reason, value? } — exactly as on Dialog, without cancel: reason is close (a Drawer.Close), escape, backdrop (a scrim click) or programmatic (every close zero did not start). Drawer.Close value="…" comes back as value, and a close the parent refuses is not reported.

<Drawer.Root model={() => state.filters} onClose={(d) => { if (d.value === 'apply') apply(); }}>
    …
    <Drawer.Close value="apply">Apply filters</Drawer.Close>
</Drawer.Root>

Anatomy#

Drawer's Root renders a fragment, so there is no root part. The trigger is the carrier part: the variant axes live on Drawer.Trigger, and a design system's axis rules for the scope anchor there. The panel is a top-layer sibling of the trigger, so colour styles the trigger, never the panel.

The backdrop is a real part that renders no element on the web: recipes style parts.backdrop and the compiler projects it onto [data-scope="drawer"][data-part="panel"]::backdrop, with states narrowing the panel. Modal and inline need no attribute of their own to tell apart — :modal is the platform's spelling of exactly that split, so a recipe writes &:modal for the trapped, scrimmed presentation and &:not(:modal) for the in-flow one. Both close and trigger publish press feedback. See The anatomy contract.

Props#

Drawer.Root#

Drawer.Trigger#

Drawer.Panel#

Drawer.Title#

Drawer.Close#

Keyboard and dismissal#

In the shipped design systems#

@sigx/zero-basic and @sigx/zero-daisyui both wire color (the eight recommended roles) and size (xs–xl) on the drawer trigger, in each skin's own button idiom. Neither wires a variant or any mods on the scope. The panel, backdrop, title and close parts are styled by every shipped design system, including the slide transition keyed on data-placement and the :modal scrim.

Related#

Dialog for a centred modal on the same machinery · Popover for an anchored, non-modal surface.