SGDS Drawer Component Skill

<sgds-drawer> is a panel that slides in from a screen edge and overlays the page content. Use it for secondary navigation, filters, or any contextual content that shouldn't interrupt the main layout.

Prerequisites

See sgds-components-setup for installation and framework integration (React 19+ vs React ≤18, Vue, Angular).

No CSS styling modifications — custom properties and CSS parts are not exposed on this component.

Quick Decision Guide

Which edge does the drawer open from?

• Right edge → placement="end" (default)
• Left edge → placement="start"
• Top edge → placement="top"
• Bottom edge → placement="bottom"

Size? → size="sm" (default), size="md", size="lg"