# Sheet

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

# Sheet

A panel that slides in from the edge of the screen, typically used for navigation or forms.

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

<Sheet />

**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 Sheets. 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="SheetAnimation.Fade"` or `Animation="SheetAnimation.None"`.

## When to Use

-   Display side panels for editing profiles, settings, or detail views
-   Build slide-out navigation menus for mobile or compact layouts
-   Show supplementary forms or configuration options without leaving the current page
-   Present multi-step content in a panel that slides in from any edge
-   Create responsive overlays that adapt between Sheet (desktop) and Drawer (mobile)

Preview Code

Default (Right)

Open Sheet

Preview Code

Side Variations

Top

Right

Bottom

Left

Preview Code

Sizes

Sm

Default

Lg

Xl

Full

Preview Code

Prevent Close

Open Protected Sheet

Preview Code

Side — interactive

Pick a value to see it applied live.

TopRightBottomLeft

Open Sheet (Right)

Preview Code

Navigation Sheet

**Mobile (rc.49).** Set `SwipeToClose="true"` on `SheetContent` to let users dismiss the sheet with a touch swipe. The swipe direction matches the `Side` parameter — swipe-down on a Bottom sheet, swipe-right on a Right sheet, etc. Default `false` because Sheets often contain scrollable content; only enable it when the sheet's content fits without scrolling.

Preview Code

Swipe-to-Close — All 4 Sides

Open any side and try the swipe gesture (works on touch devices and mouse-drag).

Top — swipe up

Right — swipe right

Bottom — swipe down

Left — swipe left

## Intercepting close

`OnBeforeClose` lets you guard any close attempt — Escape, backdrop click, or the close button. The handler receives a `DismissEventArgs` with a `Reason` string (`"escape"`, `"outside"`, `"close"`, `"action"`, or `"cancel"`). Set `e.Cancel = true` to keep the sheet open.

Preview Code

Intercepting close

Edit settings

**Nested stacking.** A Sheet opened on top of a Dialog (or another Sheet / Drawer / AlertDialog) now stacks correctly — each overlay picks the next z-index slot, and Escape only closes the top-most one. No configuration required.

## Keyboard Interactions

Key

Action

Escape

Close the sheet (unless PreventClose is enabled)

Tab

Cycle focus through interactive elements within the sheet (focus trap)

Shift + Tab

Move focus to the previous interactive element within the sheet

## API Reference

### Sheet

Property

Type

Default

Description

Open

bool

false

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

OpenChanged

EventCallback<bool>

—

Callback invoked when the open state changes.

IsOpen

bool

\> Open

Obsolete alias for Open; will be removed in a future release.

IsOpenChanged

EventCallback<bool>

\> OpenChanged

Obsolete alias for OpenChanged; will be removed in a future release.

### SheetContent

Property

Type

Default

Description

Side

SheetSide

Right

Which edge the sheet slides in from. Values: Top, Right, Bottom, Left.

Size

SheetSize

Default

Sheet dimension. On `Left`/`Right` this controls width; on `Top`/`Bottom` it controls height (2.1.1). Values: Sm, Default, Lg, Xl, Full — where **Full on Top/Bottom takes the entire viewport**, the mobile-fullscreen bottom-sheet pattern.

PreventClose

bool

false

Prevents closing via backdrop click or Escape key.

SwipeToClose

bool

false

Enables touch swipe-to-dismiss in the direction matching `Side` (Top→up, Right→right, Bottom→down, Left→left). Default false because Sheets often contain scrollable content — enable only when content fits without scrolling. Added in rc.49.

### SheetTrigger / SheetClose / SheetHeader / SheetFooter / SheetTitle / SheetDescription

Property

Type

Default

Description

These layout sub-components mirror the Dialog API: SheetTrigger opens, SheetClose closes, SheetHeader/Footer are flex containers, SheetTitle/Description style the text.

## Related Components

-   [Drawer](/components/drawer) — Use for mobile-first bottom sheet overlays with swipe-to-dismiss
-   [Dialog](/components/dialog) — Use for centered modals that demand user attention and a decision
-   [Sidebar](/components/sidebar) — Use for persistent navigation panels that remain visible alongside content