Drawer

Wraps navigation or other content in a sidebar.

To implement Drawer component into your project you’ll need to add the import:

import Drawer from "@kiwicom/orbit-components/lib/Drawer";

After adding import into your project you can use it simply like:

<Drawer shown>Content to show</Drawer>

Props

Table below contains all types of the props available in the Drawer component.

Name	Type	Default	Description
actions	`React.Node`		Actions - especially Buttons, that will be rendered on in the Drawer’s header.
children	`React.Node`		The content of the Drawer.
dataTest	`string`		Optional prop for testing purposes.
id	`string`		Set `id` for `Drawer`
noPadding	`boolean`	`false`	If `true` the wrapper won’t have any inner padding.
onClose	`() => void \\| Promise`		Function for handling onClose event.
position	`enum`	`"right"`	The position on which side the Drawer should appear.
shown	`boolean`	`"true"`	If `true` the Drawer will be visible, otherwise visually hidden, but it will stay in the DOM.
suppressed	`boolean`	`false`	If `true`, the Drawer will have cloudy background.
title	`Translation`		Title of the Drawer that will be rendered in the Drawer’s header.
width	`string`	`"320px"`	The width of the Drawer.
lockScrolling	`boolean`	`true`	Whether to prevent scrolling of the rest of the page while Drawer is open. This is on by default to provide a better user experience.
fixedHeader	`boolean`		If `true` the DrawerHeader will be fixed to the top.

position
`"right"`
`"left"`