# Drawers A modal panel at the end of the screen - or at its start with `drawer-start` - for filters, a record's details, a long form beside the list it belongs to. Bootstrap 5 calls it offcanvas; it is a `` here. ## Examples A drawer opens and closes like a dialog: `command="show-modal"` and `command="close"`. It slides in from its side - mirrored right to left - unless the person asks for less motion. ```html

Filters

Status

Sections

A drawer at the start edge: the left in English, the right in Arabic.

 ``` A product tints the head of every drawer with `--redz-drawer-header-bg`. ### Wide `drawer-lg` is 38rem (608 px) wide instead of 28rem, for a record's details with a table or a form of two columns; on a narrower window it takes the window less a margin, as every drawer does. ```html

Booking 2026-0418

North Bay by speedboat, 4 guests, 12 November 2026. Paid in full by card.

 ``` ## Keyboard and accessibility - Everything said of [dialogs](dialog.md) holds: the focus moves in and back, `Tab` stays inside, `Esc` closes. - A drawer is a region: the width prefixes inside it measure the drawer, 28 rem wide at most. - The drawer's body scrolls by itself; its header stays. ## Tokens From [`css/components/drawer.css`](https://github.com/redz-tech/REDZ.UI/blob/main/css/components/drawer.css), which declares no custom property of its own. It reads the theme's `--redz-space-8`, `--redz-border`, `--redz-radius-12`, `--redz-bg-raised`, `--redz-shadow-3`, `--redz-space-12`, `--redz-space-16`, `--redz-drawer-header-bg`, `--redz-fs-16`, `--redz-ease`. ## From Bootstrap 5.3 | Bootstrap 5.3 | REDZ.UI | Change | Note | | --- | --- | --- | --- | | `offcanvas` | `drawer` | rename | on a , opened by command="show-modal" | | `offcanvas-backdrop` | - | remove | the browser's ::backdrop | | `offcanvas-body` | `drawer-body` | rename | | | `offcanvas-bottom` | - | missing | | | `offcanvas-end` | `drawer` | rename | on a , opened by command="show-modal" | | `offcanvas-header` | `drawer-header` | rename | | | `offcanvas-start` | `drawer drawer-start` | rename | | | `offcanvas-title` | `drawer-title` | rename | | | `offcanvas-top` | - | missing | | | `data-bs-toggle="offcanvas"` | `commandfor="ID" command="show-modal"` | trigger | the drawer is a | | `data-bs-dismiss="offcanvas"` | `commandfor="ID" command="close"` | trigger | | | `bootstrap.Offcanvas` | `dialog.showModal() and dialog.close()` | trigger | |