# Drawer

Source: https://lumeo.nativ.sh/components/drawer

# Drawer

A panel that slides up from the bottom of the screen on mobile devices.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## Usage

@using Lumeo

<Drawer />

**Popovers inside Sheet/Drawer.** The slide-in animation used to create a CSS containing-block trap that broke `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

Preview Code

Default

Open Drawer

Preview Code

Filters Drawer

Filters

Preview Code

Prevent Close

Open Protected Drawer

Preview Code

Side — interactive

Pick a value to see it applied live.

TopRightBottomLeft

Open Drawer (Bottom)

Preview Code

Simple Drawer

View Details

## 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.

Preview Code

Intercepting close

New entry

**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.

## API Reference

### Drawer

Property

Type

Default

Description

Open

bool

false

Controls whether the drawer is open. Use with @bind-Open for two-way binding.

OpenChanged

EventCallback<bool>

—

Callback invoked when the open state changes.

IsOpen

bool

false

Deprecated alias for `Open`. Prefer `Open` in new code.

IsOpenChanged

EventCallback<bool>

—

Deprecated alias for `OpenChanged`. Prefer `OpenChanged` in new code.

### DrawerContent

Property

Type

Default

Description

PreventClose

bool

false

Prevents closing via swipe or backdrop click.

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.

Side

Lumeo.Side

Bottom

Side the drawer slides in from. Values: Top, Right, Bottom, Left.

## Related Components

-   [Sheet](/components/sheet) — Use for side-panel overlays on desktop; Drawer is optimized for bottom-sheet mobile interactions
-   [Dialog](/components/dialog) — Use for centered modal overlays that require explicit user decisions
-   [Popover](/components/popover) — Use for small contextual overlays anchored to a trigger element