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 Type Description
label
Close string -
screenSizes
[] array -
toggleButtonData
[] array -

CSS API

Variable Default Type Values Description
--c-drawer--space
var(--space) range - Base spacing unit. Used for padding and margin inside components.
--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--padding-multiplier
2 range - Scales drawer padding locally while keeping vertical nav padding slightly tighter on the y-axis.
--c-drawer--width-multiplier
1 range - Multiplies the default drawer width without changing the global base unit.

Similar components

Paper Header Loader