Main Content Area
This area remains visible when the drawer shrinks
Expandable, shrinkable, and closable container with smooth animations
Simple horizontal drawer with default settings. Click the hamburger icon to shrink/expand.
This is a basic drawer component that can be expanded or shrunk.
Try clicking the hamburger icon (☰) to toggle between states.
<liwe3-drawer title="Basic Drawer" direction="horizontal"> <div>Your content here</div> </liwe3-drawer>
Drawer positioned on the left side of a layout. Perfect for sidebars!
Main Content Area
This area remains visible when the drawer shrinks
Drawer with vertical expansion. Great for panels and collapsible sections!
Width: 300px
Height: auto
Background: #ffffff
Border: 1px solid #e5e7eb
Main Content Area
Content below the vertical drawer
Customize animation duration, icons, and behavior.
This drawer animates quickly with a 150ms duration.
This drawer animates slowly with a 600ms duration.
You can use any emoji or text as the toggle icon!
The title remains visible even when shrunk (useful for vertical drawers).
Drawers can be configured to be closable. When closed, they shrink and then remove themselves from the DOM.
Click the × button to close it. It will shrink and then be removed from the DOM.
You can recreate it using the button above.
Monitor drawer state changes with custom events.
Interact with this drawer to see events being dispatched.
Available events:
drawer-state-changedrawer-expandeddrawer-shrunkdrawer-closed// Listen to drawer events
drawer.addEventListener('drawer-state-change', (e) => {
console.log('State changed:', e.detail);
});
drawer.addEventListener('drawer-expanded', () => {
console.log('Drawer expanded');
});
drawer.addEventListener('drawer-shrunk', () => {
console.log('Drawer shrunk');
});
// Programmatic control
drawer.expand();
drawer.shrink();
drawer.toggle();
drawer.close();
// Access state
console.log(drawer.state); // 'expanded', 'shrunk', or 'closed'
Customize the drawer appearance using CSS custom properties:
liwe3-drawer {
--drawer-duration: 300ms;
--drawer-bg: #ffffff;
--drawer-border: #e5e7eb;
--drawer-text: #1f2937;
--drawer-icon-bg: #f3f4f6;
--drawer-icon-hover: #e5e7eb;
--drawer-button-hover: #f9fafb;
--drawer-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}