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 <dialog> 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.
<button class="btn" type="button" commandfor="drawer-filters-panel" command="show-modal"><i class="bi bi-funnel" aria-hidden="true"></i>Filters</button>
<button class="btn" type="button" commandfor="drawer-filters-start" command="show-modal"><i class="bi bi-layout-sidebar" aria-hidden="true"></i>From the start</button>
<dialog id="drawer-filters-panel" class="drawer" closedby="any" aria-labelledby="drawer-filters-panel-title">
<div class="drawer-header">
<h2 class="drawer-title" id="drawer-filters-panel-title">Filters</h2>
<button class="btn-close" type="button" commandfor="drawer-filters-panel" command="close" aria-label="Close"></button>
</div>
<div class="drawer-body vstack gap-16">
<fieldset class="vstack gap-8">
<legend class="form-label">Status</legend>
<label class="form-check"><input class="check" type="checkbox" checked>Published</label>
<label class="form-check"><input class="check" type="checkbox">Draft</label>
</fieldset>
<div class="form-floating">
<select class="form-select" id="drawer-filters-section"><option>Any section</option><option>Marine</option><option>Land</option></select>
<label for="drawer-filters-section">Section</label>
</div>
<div class="hstack gap-8 justify-content-end">
<button class="btn" type="button" commandfor="drawer-filters-panel" command="close">Reset</button>
<button class="btn btn-primary" type="button" commandfor="drawer-filters-panel" command="close">Show 9</button>
</div>
</div>
</dialog>
<dialog id="drawer-filters-start" class="drawer drawer-start" closedby="any" aria-labelledby="drawer-filters-start-title">
<div class="drawer-header">
<h2 class="drawer-title" id="drawer-filters-start-title">Sections</h2>
<button class="btn-close" type="button" commandfor="drawer-filters-start" command="close" aria-label="Close"></button>
</div>
<div class="drawer-body"><p>A drawer at the start edge: the left in English, the right in Arabic.</p></div>
</dialog>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.
<button class="btn" type="button" commandfor="drawer-lg-panel" command="show-modal"><i class="bi bi-receipt" aria-hidden="true"></i>Booking details</button>
<dialog id="drawer-lg-panel" class="drawer drawer-lg" closedby="any" aria-labelledby="drawer-lg-panel-title">
<div class="drawer-header">
<h2 class="drawer-title" id="drawer-lg-panel-title">Booking 2026-0418</h2>
<button class="btn-close" type="button" commandfor="drawer-lg-panel" command="close" aria-label="Close"></button>
</div>
<div class="drawer-body"><p>North Bay by speedboat, 4 guests, 12 November 2026. Paid in full by card.</p></div>
</dialog>Keyboard and accessibility
- Everything said of dialogs 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, 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 <dialog>, 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 <dialog>, 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 <dialog id="ID"> |
data-bs-dismiss="offcanvas" | commandfor="ID" command="close" | trigger | |
bootstrap.Offcanvas | dialog.showModal() and dialog.close() | trigger |