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>


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

actionsReact.NodeActions - especially Buttons, that will be rendered on in the Drawer’s header.
childrenReact.NodeThe content of the Drawer.
dataTeststringOptional prop for testing purposes.
idstringSet id for Drawer
noPaddingbooleanfalseIf true the wrapper won’t have any inner padding.
onClose() => void \| PromiseFunction for handling onClose event.
positionenum"right"The position on which side the Drawer should appear.
shownboolean"true"If true the Drawer will be visible, otherwise visually hidden, but it will stay in the DOM.
suppressedbooleanfalseIf true, the Drawer will have cloudy background.
titleTranslationTitle of the Drawer that will be rendered in the Drawer’s header.
widthstring"320px"The width of the Drawer.
lockScrollingbooleantrueWhether to prevent scrolling of the rest of the page while Drawer is open. This is on by default to provide a better user experience.
fixedHeaderbooleanIf true the DrawerHeader will be fixed to the top.