Drawer
Drawer presents navigation or supporting content in a side panel with controlled state.
Playground
This playground shows a navigation drawer with prepend, main content, and append regions. You can compare side, width, appearance, and positioning modes.
Positioning difference
In normal mode, the drawer participates in layout. In absolute mode, it overlays content.
API reference
Reference the verified public props for EDrawer. Its event and slots are summarized after the table.
| Property | Type | Default |
|---|---|---|
| modelValue | boolean | false |
Controls whether the drawer is open and supports two-way binding with v-model. | ||
| nav | boolean | false |
Renders the drawer root as a semantic nav element instead of an aside. | ||
| right | boolean | false |
Positions the drawer on the right side instead of the left. | ||
| width | string | number | 16 |
Sets the drawer width as a number or any valid CSS size. | ||
| widthUnit | string | rem |
Supplies the CSS unit used when width is numeric or a numeric string. | ||
| floating | boolean | false |
Insets the drawer surface and applies the floating background, radius, and optional elevation. | ||
| appearance | 'default' | 'transparent' | default |
Selects the default surface or a transparent drawer appearance. | ||
| elevation | ElevationLevel | sm |
Applies a framework shadow when the drawer is absolute or floating. | ||
| absolute | boolean | false |
Positions the drawer absolutely and activates temporary overlay behavior while open. | ||
| fixed | boolean | false |
Applies the fixed-position drawer modifier. | ||
| autoFocus | boolean | true |
Moves focus into the drawer when temporary overlay behavior becomes active. | ||
| restoreFocus | boolean | true |
Returns focus to the previously focused element when a temporary drawer closes. | ||
| disabled | boolean | false |
Applies the disabled state class to the drawer root. | ||
| devMode | boolean | false |
Disables the automatic breakpoint fallback so absolute behavior follows only the absolute prop. | ||
Event
EDrawer emits update:modelValue when its open state changes.
Slots
The prepend and append slots frame the scrollable default slot with persistent content regions.