# Drawer

<flow-drawer>

Stable

The drawer component a dismissable sidebar to contain navigation or informational UI.

The drawer comprises a main body, which may be scrollable if the content exceeds the height of the drawer. A fixed header and/or footer may also be included. By design, the drawer does not pad content. If required, content may be wrapped in a container element to add padding.

Drawers can be positioned on the left and/or right side of the UI. They can be opened and closed programmatically or by clicking on the side tab (if enabled).

Content can also be placed into the header and footer slots to add a fixed header and/or footer. The main body of the drawer will be sized to accommodate the header and footer.

WARNING

When a drawer is placed in a container rather than directly in the document body, the container should have relative positioning with overflow hidden.

# Examples

# Drawer Positioning

Set the position attribute to specify which side of the UI to attach the drawer. In standard LTR mode, start corresponds to the left side and end corresponds to the right side of the UI.

# Drawer Headers and Footers

Place content into the header and/or footer slot to add headers and footers. The content may be a single HTML element or a complex container element with text, icons and controls.

# Drawer Styling

The drawer container element can be styled to remove the default box shadow or add custom borders. CSS Custom Properties can also be used to change the width of the drawer.

# Properties

Property	Description	Type	Default
`open`	Set to `true` to open the drawer.	`boolean`	`false`
`position`	The side of the parent element to which the drawer is attached.	`"end" \| "start"`	`'start'`
`sideTab` `side-tab`	Set to `true` to display a 'side tab', which can be used to toggle the open state of the drawer.	`boolean`	`false`

# Events

Event	Description	Type
`flowDrawerClosed`	Emitted when the drawer has closed.	`any`
`flowDrawerClosing`	Emitted when the drawer is closing.	`any`
`flowDrawerOpened`	Emitted when the drawer has opened.	`any`
`flowDrawerOpening`	Emitted when the drawer is opening.	`any`

# Slots

Slot	Description
`(default)`	The main body content of drawer.
`footer`	The drawer footer content.
`header`	The drawer header content.

# CSS Custom Properties

Name	Description
`--background`	Background of the drawer. (Default: background)
`--color`	Text color of the drawer. (Default: text)
`--flow-drawer-end-width`	Start-positioned drawer width in CSS units. (Default: --flow-drawer-width)
`--flow-drawer-start-width`	End-positioned drawer width in CSS units. (Default: --flow-drawer-width)
`--flow-drawer-width`	Drawer width in CSS units. (Default: 240px)
`--side-tab-color`	Color of the side tab icon. (Default: secondary)

# CSS Parts

Name	Description
`drawer`	The drawer container.

← Dialog Drawer Container →