Drawer

A drawer is a panel that slides in from the left side of the screen.

Caution

We are planning on deprecating Drawer. Please use Modal instead. Drawer should not be used with our new Navigation system

Examples Code Usage Migration guide Changelog

Installation

Package installation information
Install	`yarn add @atlaskit/drawer`
Source	Bitbucket.org, (opens new window)
npm	@atlaskit/drawer, (opens new window)
Bundle	unpkg.com, (opens new window)

Props

Drawer

`autoFocusFirstElem`
Description	Controls whether to focus the first tabbable element inside the focus lock. Set to `true` by default.
Type	`boolean`

`children`
Description	The content of the drawer.
Type	`string \| number \| boolean \| React.ReactElement<any, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal`

`enterFrom`
Description	Sets the direction the draw enters from. The default is "left".
Type	`"top" \| "bottom" \| "right" \| "left"`

`isFocusLockEnabled`
Description	Enable this to keep focus inside the component until it’s closed. This is strongly recommended, as it prevents people who use assistive technology from accidentally navigating out of the drawer using the tab key.
Type	`boolean`

`isOpen`
Required
Description	Controls if the drawer is open or closed.
Type	`boolean`

`label`
Description	This is an `aria-label` attribute. It sets an accessible name for the drawer wrapper, for people who use assistive technology. Usage of either this, or the `titleId` attribute is strongly recommended.
Type	`string`

`onClose`
Description	Callback function called when the drawer is closed.
Type	`(event: React.SyntheticEvent<HTMLElement, Event>, analyticsEvent?: any) => void`

`onCloseComplete`
Description	A callback function that will be called when the drawer has finished its close transition.
Type	`(node: HTMLElement) => void`

`onKeyDown`
Description	Callback function called while the drawer is displayed and `keydown` event is triggered.
Type	`(event: React.SyntheticEvent<Element, Event>) => void`

`onOpenComplete`
Description	A callback function that will be called when the drawer has finished its opening transition.
Type	`(node: HTMLElement) => void`

`shouldReturnFocus`
Description	ReturnFocus controls what happens when the user exits focus lock mode. If true, focus returns to the trigger element . If false, focus remains where it was when the FocusLock was deactivated. If ref is passed, focus returns to that specific ref element.
Type	`boolean \| React.RefObject<HTMLElement>`

`testId`
Description	A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
Type	`string`

`titleId`
Description	This is an ID referenced by the drawer wrapper's `aria-labelledby` attribute. This ID should be assigned to the drawer `title` element. Usage of either this, or the `label` attribute is strongly recommended.
Type	`string`

`width`
Description	Sets the width of the drawer.
Type	`"medium" \| "narrow" \| "wide" \| "extended" \| "full"`

`zIndex`
Description	Z-index that the popup should be displayed in. This is passed to the portal component. Defaults to `unset`.
Type	`number \| "unset"`

DrawerContent

The main content of the drawer.

`children`
Description	The content of the drawer.
Type	`string \| number \| boolean \| React.ReactElement<any, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal`

`scrollContentLabel`
Description	When the content is scrollable, this is the accessible name for the the drawer region. The default is "Scrollable content".
Type	`string`

`xcss`
Description	No description.
Type	`false \| (XCSSValue<"backgroundColor" \| "marginBlockStart" \| "marginTop" \| "paddingBlockEnd" \| "paddingBlockStart" \| "paddingBottom" \| "paddingInlineEnd" \| "paddingInlineStart" \| "paddingLeft" \| "paddingRight" \| "paddingTop" \| "padding", DesignTokenStyles, ""> & ... 4 more ... & { ...; })`

DrawerSidebar

The sidebar is positioned adjacent to the main content and is intended to house the close button.

`children`
Description	The content of the sidebar.
Type	`string \| number \| boolean \| React.ReactElement<any, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal`

`xcss`
Description	No description.
Type	`false \| (XCSSValue<"width" \| "backgroundColor" \| "paddingBottom" \| "paddingLeft" \| "paddingRight" \| "paddingTop" \| "padding", DesignTokenStyles, ""> & ... 4 more ... & { ...; })`

DrawerCloseButton

An icon button that closes the drawer.

`icon`
Description	Use this to render an icon for the drawer close/back control, if it's available.
Type	`React.ComponentClass<any, any> \| React.FunctionComponent<any>`

`label`
Description	This is the accessible name for the close/back control of the drawer. The default is "Close drawer".
Default	`"Close drawer"`
Type	`string`

`testId`
Description	A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
Default	`"DrawerCloseButton"`
Type	`string`

Was this page helpful?

We use this feedback to improve our documentation.

Drawer

Caution

Installation

Props

Drawer

`autoFocusFirstElem`

`children`

`enterFrom`

`isFocusLockEnabled`

`isOpen`

`label`

`onClose`

`onCloseComplete`

`onKeyDown`

`onOpenComplete`

`shouldReturnFocus`

`testId`

`titleId`

`width`

`zIndex`

DrawerContent

`children`

`scrollContentLabel`

`xcss`

DrawerSidebar

`children`

`xcss`

DrawerCloseButton

`icon`

`label`

`testId`

Was this page helpful?