Drawer
Slide-out navigation
Basic Drawer
Simple sliding drawer panel
Main Content
This is the main content area.
Show Code
Drawer with Overlay
Drawer with background overlay
Main content with overlay drawer.
Show Code
Responsive Drawer
Drawer that adapts to screen size
Content that works on mobile and desktop.
Show Code
Drawer with Navbar
Drawer integrated with navigation bar
Main content with integrated navbar.
Show Code
End Drawer
Drawer that slides from the right side
Main content with right-side drawer.
Show Code
API Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| children* | any | Yes | - | Main content of the drawer |
| sidebarContent* | any | Yes | - | Content to display in the sidebar |
| allowOverlayToggle | boolean | No | false | Allow toggling overlay Examples: true, false Since: 1.0.0 |
| allowSideSwitch | boolean | No | false | Allow switching drawer side Examples: true, false Since: 1.0.0 |
| class | string | No | - | Additional CSS classes |
| controlsPosition | 'sidebar' | 'content' | No | "sidebar" | Position of control elements Examples: sidebar, content Since: 1.0.0 |
| id | string | No | - | HTML id attribute |
| onClose | Function | No | - | Close event handler |
| onToggle | (arg0: boolean) => void | No | - | Toggle handler for controlled mode |
| open | boolean | No | false | Whether the drawer is open Examples: true, false Since: 1.0.0 |
| overlay | boolean | No | true | Whether to show overlay when open Examples: true, false Since: 1.0.0 |
| showControls | boolean | No | false | Whether to show interactive controls Examples: true, false Since: 1.0.0 |
| showStatus | boolean | No | false | Show drawer status information Examples: true, false Since: 1.0.0 |
| side | 'left' | 'right' | No | "left" | Side where drawer appears Examples: left, right Since: 1.0.0 |