OverlayBrowse overlay components
Drawer
Side-anchored panel with slide-in animation. Left or right, 3 sizes.
Live preview
Page content
Usage
Adapters:React stableVue stable
index.html
<aside class="lm-drawer lm-drawer-md" role="dialog" aria-modal="true">…</aside>CSS classes (3)
| Class | Description |
|---|---|
lm-drawer | Side panel (right by default) |
lm-drawer-left | Anchor to left edge |
lm-drawer-{size} | sm | md | lg |
React props (2)
| Prop | Type | Default | Description |
|---|---|---|---|
side | left | right | — | — |
size | sm | md | lg | — | — |
Accessibility
- Use role='dialog' and aria-modal='true' for blocking overlays.
- Trap focus inside the overlay; return focus to the trigger on close.
- Provide aria-labelledby and aria-describedby.
- Close on Escape and outside-click.
Spotted something wrong? Edit this entry on GitHub.