Components / Drawer
Drawer
Slide-in side panel with smooth ease-in-out animation, frosted glass backdrop, header icon, back button, footer slot, focus trap, body scroll lock, 4 sizes, and configurable close behavior.
overlaysv0.5.0
Playground
Examples
With icon
Configure your preferences. The drawer slides in with a smooth ease and has rounded corners on the inner edge.
<cg-button onclick="this.nextElementSibling.open=true">Settings</cg-button><cg-drawer title="Settings" icon="settings" side="right"><p>Configure your preferences. The drawer slides in with a smooth ease and has rounded corners on the inner edge.</p><div slot="footer"><cg-button variant="tertiary" onclick="this.closest('cg-drawer').open=false">Cancel</cg-button><cg-button onclick="this.closest('cg-drawer').open=false">Save</cg-button></div></cg-drawer>With back button
Drill-down view with a back button for nested navigation patterns.
<cg-button onclick="this.nextElementSibling.open=true">Open Details</cg-button><cg-drawer title="Account Details" icon="user" back side="right"><p>Drill-down view with a back button for nested navigation patterns.</p></cg-drawer>Straight edges
A drawer with no border radius — flush edge-to-edge for a more traditional panel look.
<cg-button onclick="this.nextElementSibling.open=true">Notifications</cg-button><cg-drawer title="Notifications" icon="bell" side="right" rounded="none"><p>A drawer with no border radius — flush edge-to-edge for a more traditional panel look.</p></cg-drawer>Left navigation
Left side drawer for navigation menus and sidebars.
<cg-button onclick="this.nextElementSibling.open=true">Open Nav</cg-button><cg-drawer title="Navigation" icon="menu" side="left"><p>Left side drawer for navigation menus and sidebars.</p></cg-drawer>Full width
Full-width drawer for complex forms or detail views on mobile.
<cg-button onclick="this.nextElementSibling.open=true">Open Full</cg-button><cg-drawer title="Full Panel" size="full" rounded="none"><p>Full-width drawer for complex forms or detail views on mobile.</p><div slot="footer"><cg-button variant="tertiary" onclick="this.closest('cg-drawer').open=false">Cancel</cg-button><cg-button onclick="this.closest('cg-drawer').open=false">Done</cg-button></div></cg-drawer>Import
import { CgDrawer } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/cg-drawer';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | false | Open state |
side | "left" | "right" | "right" | Slide from side |
title | string | "" | Drawer title in header |
icon | string | "" | Icon name next to title (uses cg-icon) |
back | boolean | false | Show back arrow button in header |
size | "sm" | "md" | "lg" | "full" | "md" | Panel width — sm (320), md (480), lg (640), full (100vw) |
closable | boolean | true | Show close button and allow Escape key |
persistent | boolean | false | Prevent closing by clicking backdrop |
loading | boolean | false | Show loading overlay |
error | string | "" | Error message banner |
rounded | "none" | "sm" | "md" | "lg" | "full" | "lg" | Border radius variant |
Events
| Event | Detail | Description |
|---|---|---|
cg-drawer-open | {} | Drawer opened |
cg-drawer-close | {} | Drawer closed |
cg-drawer-back | {} | Back button clicked |