#Drawer

#Import

import { Drawer } from '@dnb/eufemia'

#Description

The Drawer component is a Modal variation that appears as a side panel at any chosen side of the page; top, bottom, left or right (default right). A Drawer is typically used to show additional information. It can also be used to have easy/quick tasks while being in context.

#Relevant links

• Figma
• Source code
• Docs code

#Parts in Drawer

To provide custom content to parts of the Drawer, a set of component parts are provided:

• <Drawer.Navigation>: The navigation field at the top of the component, default with a close button (Equal to the property navContent).
• <Drawer.Header>: The header field of the component, where the title will appear (Equal to the property headerContent).
• <Drawer.Body>: The body of the Drawer, provided with a section background color, default black-3 (Equal to the property modalContent).

#More detailed information

For more details regarding the component functionality, check out the Modal documentation.