+ /
Help Center Community What's New v2.0
Privacy and Legal Documentation
Submit Feedback Report a Bug
user
Your order is placed
Amet minim mollit non deser unt ullamco est sit aliqua.
3 min ago
user
Congratulations Darlene 🎉
Won the monthly best seller badge
3 min ago
user
Revised Order 👋
Won the monthly best seller badge
3 min ago
user
Brooklyn Simmons
Added you to Top Secret Project group...
3 min ago
Mark all as read

Basic Drawer

Below is a drawer example that is shown by default (via show on drawer). Drawer includes support for a header with a close button and an optional body and footer classes for some initial padding. We recommand that you include drawer headers with dismiss button whenever possible, or provide an explicit dismiss button.

Basic Drawer

Configure drawer settings to customize the sidebar behavior and appearance. Adjust position, size, animation effects, and overlay preferences to match your application's design requirements and enhance user experience across different screen sizes and devices.

Drawer Without Backdrop

Use [--overlay-backdrop:false] attribute to disable the default backdrop of drawer.

Drawer Without Backdrop

Manage drawer animations and transitions to create smooth, engaging user interactions. Choose from slide, fade, or bounce effects, and customize timing and easing functions to provide the best user experience across your application interface.

Drawer With Static Backdrop

Change the data-backdrop attribute to static to disable the backdrop close functionality.

Static Backdrop

Static backdrop prevents the drawer from closing when clicking outside the content area. This ensures users complete their current action before dismissing the drawer, providing better form validation and preventing accidental data loss in critical workflows.

Drawer Placements

Use drawer-left, drawer-right, drawer-top and drawer-bottom modifier classes to set the drawer placement. Default is drawer-left

Drawer Start

Drawer components provide slide-out navigation and content panels for enhanced iure tempora a blanditiis inventore voluptatibus cupiditate, consectetur maiores architecto deleniti omnis voluptatem facilis officiis odio harum quasi quae atque necessitatibus.

Drawer End

Drawer components provide slide-out navigation and content panels for enhanced iure tempora a blanditiis inventore voluptatibus cupiditate, consectetur maiores architecto deleniti omnis voluptatem facilis officiis odio harum quasi quae atque necessitatibus.

Drawer Top

Responsive drawer navigation adapts seamlessly across different screen sizes and devices. Incidunt iure tempora a blanditiis inventore voluptatibus cupiditate, consectetur maiores architecto deleniti omnis voluptatem facilis officiis odio harum quasi quae atque necessitatibus.

Drawer Bottom

Responsive drawer navigation adapts seamlessly across different screen sizes and devices. Incidunt iure tempora a blanditiis inventore voluptatibus cupiditate, consectetur maiores architecto deleniti omnis voluptatem facilis officiis odio harum quasi quae atque necessitatibus.

Controlled Drawer

To control the drawer via javascript, use createDrawer() global function to initialize the drawer with default options.

Controlled Drawer

Drawer components provide slide-out navigation and content panels for enhanced iure tempora a blanditiis inventore voluptatibus cupiditate, consectetur maiores architecto deleniti omnis voluptatem facilis officiis odio harum quasi quae atque necessitatibus.

Disable Drawer Keypress

Set data-keyboard attribute to false to disable the ESC close functionality of drawer.

Disable Drawer Keypress

Disable keyboard shortcuts for this drawer to prevent accidental dismissal. This is useful for critical forms or data entry processes where users should only close the drawer through explicit button interactions, ensuring data integrity and preventing workflow interruptions.