Skip to content
Home

Drawer

Info
Demos
Properties
Events

Properties

PropertiesDescription
containerPlacement(optional) Defines on what side the Drawer should be opened. Can be set to left, right, top and bottom. Defaults to right.
title(optional) The drawer title. Displays on the very top of the content.
minWidth(optional) The minimum Drawer content width, defined by a CSS width value like 50vw (50% of the viewport). Be careful on using fixed minWidth so you don't break responsiveness. Defaults to 30rem (average width is set to 60vw).
maxWidth(optional) The maximum Drawer content width, defined by a CSS width value like 20rem. Defaults to 60rem (average width is set to 60vw).
className(optional) Give the Drawer content a class name (maps to dnb-drawer).
spacing(optional) If set to false then the drawer content will be shown without any spacing. Defaults to true.
preventCoreStyle(optional) By default the drawer content gets added the core style class dnb-core-style. Use false to disable this behavior.
navContent(optional) The content which will appear in the navigation, above the header, and side-by-side the close button.
headerContent(optional) The content which will appear in the header of the drawer.
modalContent(optional) The content which will appear when triggering the drawer.
alignContent(optional) Define the inner horizontal alignment of the content. Can be set to left, center, right and centered. If centered, then the content will also be centered vertically. Defaults to left.
fullscreen(optional) If set to true then the drawer content will be shown as fullscreen, without showing the original content behind. Can be set to false to omit the auto fullscreen. Defaults to auto.

More props

The properties of Modal are also provided.

PropertiesDescription
id(optional) The id used internal for the trigger button and Modal component.
rootId / root_id(optional) The id used internal in the modal root element. Defaults to root, so the element id will be dnb-modal-root.
contentId / content_id(optional) Defines an unique identifier to a modal. Use it in case you have to refer in some way to the modal content.
labelledBy / labelled_by(optional) The ID of the trigger component, describing the modal content. Defaults to the internal trigger, so make sure you define the title in triggerAttributes.
children or function(optional) the content which will appear when triggering open the modal. If a function is given, you get a close method () => ({ close }) in the arguments.
fullscreen(optional) If set to true then the modal content will be shown as fullscreen, without showing the original content behind. Can be set to false to omit the auto fullscreen. Defaults to auto.
openState / open_state(optional) use this prop to control the open/close state by setting either: opened / closed or true / false.
openDelay / open_delay(optional) forces the modal to delay the opening. The delay is given in ms.
disabled(optional) Will disable the trigger button
noAnimation / no_animation(optional) if set to true, no open/close animation will be shown. Defaults to false.
noAnimationOnMobile / no_animation_on_mobile(optional) same as noAnimation, but gets triggered only if the viewport width is less than 40em. Defaults to false.
animationDuration / animation_duration(optional) Duration of animation open/close in ms. Defaults to 300ms.
preventClose / prevent_close(optional) if set to true (boolean or string), then the user can't close the modal.
preventOverlayClose / prevent_overlay_close(optional) Disable clicking the background overlay to close the modal. PS! Pressing esc key will still close the modal.
openModal / open_modal(optional) set a function to call the callback function, once the modal should open: open_modal={(open) => open()}
closeModal / close_modal(optional) set a function to call the callback function, once the modal should close: close_modal={(close) => close()}
focusSelector / focus_selector(optional) The Modal handles the first focus – automatically. However, you can define a custom focus selector the will be used instead focusSelector=".css-selector".
overlayClass / overlay_class(optional) give the page overlay a custom class name (maps to dnb-modal__overlay).
contentClass / content_class(optional) give the content wrapper a custom class name (maps to dnb-modal__content).
omitTriggerButton / omit_trigger_button(optional) omits default showing trigger button.
trigger(optional) provide a custom trigger component. Like trigger={<Anchor href="/" />}. It will set the focus on it when the modal gets closed.
triggerAttributes / trigger_attributes(optional) send along with custom HTML attributes or properties to the trigger button.
dialogTitle / dialog_title(optional) The aria label of the dialog when no labelled_by and no title is given. Defaults to Vindu.
directDomReturn / direct_dom_return(optional) If true, the modal will not open in a new DOM but directly in current DOM. Defaults to false. Be aware of the side effects of setting this property to true.
bypassInvalidationSelectors / bypass_invalidation_selectors(optional) Define an array with HTML class selectors (['.element-selector']) which should not get invalidated when the modal opens/closes. Use this in order to let some parts of your site still be accessible by screen readers.
scrollRef(optional) To get the scroll Element, pass in your own React ref.
contentRef(optional) To get the inner content Element, pass in your own React ref.
Space(optional) spacing properties like top or bottom are supported.
spacing(deprecated/optional) if set to false then the modal content will be shown without any spacing. Defaults to true.
closeTitle / close_title(deprecated/optional) the title of the close button. Defaults to Lukk.
hideCloseButton(deprecated/optional) if true, the close button will not be shown.
class or className(deprecated/optional) give the inner content wrapper a class name (maps to dnb-modal__content__inner).

Drawer sizes

The Drawer is responsive with the following properties:

--drawer-width: 40vw;
--drawer-min-width: 25rem;
--drawer-max-width: 40rem;