Drawer
Material Design 3-styled drawer web component (lit-material-drawer) — a non-modal, persistent overlay panel, e.g. for a notification drawer.
- 1.6 KB gzipped
- @lit-material/drawer 0.0.3
- Renders on the server
Example
Drawer
A non-modal, persistent overlay panel — for a notification drawer or any contextual panel that stays open alongside the page.
New comment on your post.
Your export finished.
Weekly summary is ready.
Install
npm install @lit-material/drawer @lit-material/tokensimport "@lit-material/drawer";Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide
API
<lit-material-drawer>
A non-modal, persistent overlay panel — for a notification drawer, an
activity feed, or any contextual panel that should stay open alongside
the page rather than blocking it. Built on the native Popover API
(popover="manual", the same foundation lit-material-tooltip uses),
not <dialog>: there's no scrim, no focus trap, and no Escape-to-close,
because unlike lit-material-side-sheet's modal variant, this
component doesn't demand the user deal with it before doing anything
else. popover="manual" also means it never light-dismisses on an
outside click the way an auto popover (lit-material-menu,
lit-material-speed-dial) would — "persistent" is the point, so closing
it is always an explicit action (a close button in header, or setting
open = false yourself).
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
open | open | boolean | false | |
position | position | DrawerPosition | "end" | Which viewport edge the drawer is anchored to. |
Slots
| Slot | Description |
|---|---|
header | Optional header content — typically a title and a close button, as a single wrapping element. |
| default | The drawer's content. |
CSS parts
| Part | Description |
|---|---|
header | The header slot's container. |
body | The main content's container. |