A slide-out drawer panel that appears from the viewport edge. Drawers present complementary content or navigation...

A slide-out drawer panel that appears from the viewport edge. Drawers present complementary content or navigation without blocking the page. Supports header and footer sections with flexible alignment and optional backdrop. Use drawers to: - Display navigation menus (side navigation, mobile navigation) - Show filters, settings, or auxiliary panels - Present contextual information or actions - Create off-canvas content layouts Features: - Align to top, right (default), bottom, or left edges - Optional semi-transparent backdrop behind drawer - Built-in close button with toggle handler - Smooth slide animation - Semantic role="dialog" for accessibility The isActive property controls visibility (true = open, false = closed). The align property controls which edge the drawer slides from. Set hasBackdrop to true to add a semi-transparent backdrop behind the drawer.

<ed-drawer></ed-drawer>

Properties

Name Type Default Description
align String 'top' | 'right' | 'bottom' | 'left' = 'right' A slide-out drawer panel that appears from the viewport edge. Drawers present complementary content or navigation without blocking the page. Supports header and footer sections with flexible alignment and optional backdrop. Use drawers to: - Display navigation menus (side navigation, mobile navigation) - Show filters, settings, or auxiliary panels - Present contextual information or actions - Create off-canvas content layouts Features: - Align to top, right (default), bottom, or left edges - Optional semi-transparent backdrop behind drawer - Built-in close button with toggle handler - Smooth slide animation - Semantic role="dialog" for accessibility The isActive property controls visibility (true = open, false = closed). The align property controls which edge the drawer slides from. Set hasBackdrop to true to add a semi-transparent backdrop behind the drawer. / export class EdDrawer extends EdElement { static get styles() { return unsafeCSS(styles); } /** Align variants <ed-text-passage size="sm"> <ul> <li>**top** - aligns the drawer to the top of the viewport</li> <li>**right** - aligns the drawer to the right of the viewport</li> <li>**bottom** - aligns the drawer to the bottom of the viewport</li> <li>**left** - aligns the drawer to the left of the viewport</li> </ul> </ed-text-passage>
hasBackdrop String boolean = false Fade/ghost back the page background content

Slots

Name Description
- Drawer body content (main area)
header Drawer header area (typically title/heading)
footer Drawer footer area (typically actions/buttons)

Interactive Documentation

Full interactive examples, variant previews, accessibility audits, and the complete API reference are available in Storybook — generated directly from the component source code.

Source

packages/eddie-web-components/components/drawer/drawer.ts