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 for easy/quick tasks while staying in context.

Relevant links

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.

Root Element (React Portal)

The Drawer component uses PortalRoot internally to render its content. See the PortalRoot documentation for information on how to control where the portal content appears in the DOM.