Drawer

A drawer that slides up from the bottom edge, which is the default Direction. The drawer includes a visible drag handle bar at the top, a DrawerHeader with title and description, form fields, and a DrawerFooter with action buttons. Use DrawerClose to wrap any element that should close the drawer on click.

Set Direction to DrawerDirection.Right to slide the drawer in from the right edge. This is a common pattern for sidebar navigation menus on mobile devices. The drawer automatically constrains its width to w-3/4 with a sm:max-w-sm maximum on larger screens.

Set Direction to DrawerDirection.Left to slide the drawer in from the left edge. This direction is commonly used for settings panels and app sidebars that follow the natural left-to-right reading order.

Set Direction to DrawerDirection.Top to slide the drawer down from the top edge. This direction works well for notification panels, search interfaces, or banner-style content that drops down over the page.

Use @bind-Open to programmatically control the drawer state. This is useful when the drawer needs to be opened from a different part of the UI or closed after an async operation completes, such as saving form data.

Set ShowHandle="false" on DrawerContent to hide the drag handle bar. This creates a cleaner look for drawers that serve as simple panels rather than mobile-style bottom sheets.

Use the Class parameter on DrawerContent to apply custom Tailwind CSS for project-specific styling. This example uses a gradient background and custom border colour to create a branded drawer that matches your application's design system.

A real-world pattern showing a mobile action sheet with grouped options and icons. This pattern replaces dropdown menus on touch devices where hover interactions are not available, providing large touch targets for each action.