Skip to content
Home

Drawer

Info
Demos
Properties
Events

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.

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.