Left
Contextual tools for the current page.
<cad-drawer>
Drawer
Open a panel from the edge of the screen for a related task. The page stays visible but cannot be used until the drawer closes.
Edit task details
Open the panel, then close it to return focus to the trigger.
Review and update the Q3 roadmap.
Placements
Open an example to try each placement.
Right
Related details and editing.
Top
Wide controls that stay close to the page.
Bottom
A focused task that enters from the lower edge.
Placement and size
Choose left, right (default), top, or bottom. Sizes sm, md, and lg control width for side drawers and height for top or bottom drawers.
Drawer or Modal?
Use Drawer for a task related to the page, Modal for a short decision, and a full page for longer workflows.
API reference: <cad-drawer>
Accessibility
Background content is inactive and focus stays in the drawer. Escape, the close button, or an enabled backdrop click dismiss it and restore focus. cad-drawer-close reports the dismissal reason.