Drawer
The Drawer component provides a reusable pattern for drawer in the interface.
Drawer
Note: We've removed the placement of the buttons to prevent issues with documentation. Remove the values from the classList to get the intended layout.
API
| Parameter | Default | Description |
|---|---|---|
|
label
|
Close | What to say in the label of the close drawer button. |
|
screenSizes
|
[] | Show on selected screen sizes. xs,sm,md,lg,xl. |
|
toggleButtonData
|
[] | The data to be passed to the toggle button. If empty no button will be rendered. |
CSS API
| Variable | Default | Type | Values | Description |
|---|---|---|---|---|
|
--c-drawer--space
|
var(--space) | range | - | Controls drawer header, footer, and navigation item padding. |
|
--c-drawer--base
|
var(--base) | range | - | Main unit that drives radius and spacing scales. |
|
--c-drawer--color--primary
|
var(--color--primary) | color | - | Controls the main drawer background when the drawer is duotone. |
|
--c-drawer--color--primary-contrast
|
var(--color--primary-contrast) | color | - | Primary Contrast |
|
--c-drawer--color--secondary
|
var(--color--secondary) | color | - | Controls the secondary navigation area when the drawer is duotone. |
|
--c-drawer--color--secondary-contrast
|
var(--color--secondary-contrast) | color | - | Secondary Contrast |
|
--c-drawer--color--surface
|
var(--color--surface) | color | - | Controls the default drawer background, text contrast, field colors, and surface borders. |
|
--c-drawer--shadow-color
|
var(--shadow-color) | rgba | - | Controls the color used by the drawer shadow. |
|
--c-drawer--shadow-amount
|
var(--shadow-amount) | range | - | Controls how strong the drawer shadow appears when open. |
|
--c-drawer--color--surface-contrast
|
var(--color--surface-contrast) | color | - | Used for text and icons on surface backgrounds with less contrast. |
|
--c-drawer--color--surface-border
|
var(--color--surface-border) | color | - | Manual companion token for borders on surface elements. |
|
--c-drawer--color--alpha
|
var(--color--alpha) | rgba | - | Controls the dimmed backdrop shown behind an open drawer, including its opacity. |
|
--c-drawer--width-multiplier
|
1 | range | - | Multiplies the default drawer width without changing the global base unit. |