Drawer
A panel that slides up from the bottom of the screen on mobile devices.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <Drawer />
position: fixed
popovers (Select, DatePicker, Combobox) inside Drawers. Fixed in rc.21
— the slide keyframes now end at transform: none
instead of identity-translate. If you still need predictability for older
rc consumers, set Animation="DrawerAnimation.Fade"
or Animation="DrawerAnimation.None".
When to Use
- Present mobile-first overlays that slide up from the bottom of the screen
- Build bottom sheets for action selection, filters, or confirmations
- Show supplementary content without navigating away from the current page
- Provide a gesture-friendly overlay that supports swipe-to-dismiss
- Display quick-action menus on touch devices
Bottom drawer with snap points at 40% / 75% / 100%. On a touch device (or DevTools device emulation), drag the handle to move between snaps; a quick flick down dismisses. On desktop it opens at the active snap so you can still see the resting position. Active snap: 75% (index 1).
Pick a value to see it applied live.
Intercepting close
OnBeforeClose fires for
every close path including swipe-down on touch devices. The handler receives a
DismissEventArgs with a
Reason string —
"escape",
"outside",
"swipe",
"close",
"action", or
"cancel". Set
e.Cancel = true to keep
the drawer open.
Nested stacking. Drawers stack automatically on top of Dialogs, Sheets, AlertDialogs, or other Drawers — z-index is allocated per overlay, and Escape closes only the top-most one. No API change.
Keyboard Interactions
| Key | Action |
|---|---|
| Escape | Close the drawer (unless PreventClose is enabled) |
| Tab | Cycle focus through focusable elements within the drawer |
| Shift + Tab | Move focus to the previous focusable element within the drawer |
On touch devices, swiping down on the drawer handle also dismisses it.
Exit animation
Closing a drawer plays a slide-and-fade-out animation and keeps the panel mounted until it finishes, so the
dismissal reads as deliberate rather than an abrupt pop. This is on by default. Set
PlayExitAnimation="false"
on DrawerContent to opt out and
unmount immediately — useful inside another animating container or for reduced-motion contexts.
API Reference
Drawer
DrawerContent
The panel that slides up from the bottom of the screen. Includes focus trap, scroll lock, and swipe-to-dismiss gesture. Sub-components DrawerTrigger, DrawerClose, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription mirror the Dialog/Sheet API.