Side Sheet

Material Design 3 side sheet for contextual navigation and supporting workflows that slide in from the left or right edge. Not intended as a primary app navigation shell; use a navigation drawer when the surface must remain persistently navigational.

Basic Usage

Open a standard side sheet from the left side. Side sheets expose contextual tools while preserving the user's current page and task state.

Open Left Sheet

<ds-side-sheet id="sheet-left" variant="standard" position="left">
  <div slot="header"><h2>Navigation</h2></div>
  <p>Sheet content goes here.</p>
</ds-side-sheet>

Initial Value

Pre-configure swipe behavior before opening.

Open Configured Sheet

<ds-side-sheet
  variant="standard"
  position="right"
  swipeable="false">
  <p>Swipe-to-dismiss is disabled for this sheet.</p>
</ds-side-sheet>

Variants

Choose position and variant to match the intended interaction.

Right Position

Open Right Sheet

Modal Variant

<ds-side-sheet variant="modal" position="right">
  <p>Modal side sheet requires explicit close.</p>
</ds-side-sheet>

States

Control open and close state programmatically.

Open State Demo

Close State Demo

const sheet = document.querySelector('#sheet-state');
sheet.show();
sheet.close();

Interactive Example

Watch side sheet lifecycle and swipe events in the log.

Open Interactive Sheet

Event log:

API

Attributes

Attribute	Type	Default	Description
`variant`	string	`standard`	`standard` or `modal`.
`position`	string	`left`	`left` or `right`.
`open`	boolean	false	Controls whether the sheet is visible.
`swipeable`	boolean	true	Enables swipe-to-dismiss for standard variant.

Events

Event	Detail	Description
`ds-side-sheet:open`	`{}`	Fired when the sheet opens.
`ds-side-sheet:close`	`{}`	Fired when the sheet closes.
`ds-side-sheet:swipe`	`{ progress }`	Fired while swiping with progress from 0 to 1.

Methods

Method	Description
`show()`	Opens the side sheet.
`close()`	Closes the side sheet.

CSS Parts

Part	Description
`container`	Outer fixed-position host layer.
`scrim`	Background overlay layer.
`sheet`	Main side sheet surface.
`header`	Header slot wrapper.
`content`	Default content slot wrapper.
`actions`	Actions slot wrapper.

CSS Custom Properties

Property	Description
`--ds-side-sheet-width`	Width of the sheet panel.
`--ds-side-sheet-max-width`	Maximum width constraint.
`--ds-side-sheet-header-padding`	Header padding (mapped to global spacing tokens).
`--ds-side-sheet-actions-gap`	Action row spacing (mapped to global spacing tokens).

Accessibility

Keyboard Interaction

Key	Context	Expected Result
`Tab` / `Shift+Tab`	Sheet open	Moves focus through controls within the sheet
`Escape`	Standard sheet open	Closes the sheet and restores focus to the trigger
`Enter` / `Space`	Focus on action button	Activates the focused action

Semantics

Sheet surface uses role="complementary" and aria-modal="true".
Focus is restored to the previously focused element on close.
Scrim click closes standard variant and is ignored in modal variant.

Usage Guidelines

When to use: Use left position for navigation-adjacent context and right position for tools, metadata, or assistive workflows.
When not to use: Avoid side sheets for core app routing or long-form data entry that deserves a dedicated page.
Composition: Choose modal variant when dismissal requires explicit action. Keep primary actions in the actions slot for consistency.
Common mistakes: Overlapping side-sheet responsibility with drawers can confuse users. Keep side-sheet content contextual and scoped.