Usage
Drawer shows context-sensitive actions and information alongside the main view. Unlike a Modal, it doesn't block the user from continuing their task — it sits beside the content rather than over it.
A Drawer is placed in the drawer slot of a Layout, and is shown or hidden by adding it to or removing it from that layout.
import "@nordhealth/components/lib/Drawer"
Give the drawer a header with a close control, and show or hide it by toggling whether it is connected to the layout:
Examples
Header and footer
Use the header slot for a Header with a title and close button, and the footer slot for call-to-action buttons. The default slot scrolls when its content overflows.
Detail view
A drawer is well suited to showing the details of a selected record, such as a description list of fields.
Padding
The padding attribute controls the spacing around the default slot. Set it to none to lay out edge-to-edge content yourself, while the header and footer keep their own spacing.
RTL
The drawer follows the document or container direction, anchoring to the opposite edge. Toggle the direction to see the layout mirror.
Accessibility
- Provide a visible close control in the
headerslot, and give icon-only buttons an accessible name via a Tooltip referenced witharia-describedby. - A drawer does not trap focus or block the rest of the page — it is non-modal by design. Use a Modal instead when the user must resolve the content before continuing.
- Keep the drawer header concise and use a real heading element so screen reader users can navigate to it.
API reference
Drawer
Drawer is used to display context-sensitive actions and information. Drawer doesn’t block users from completing their task, like a modal would.
<nord-accordion></nord-accordion>Props
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
padding | padding | Controls the padding of the drawer component. | 'l' | 'm' | 's' | 'none' | 'l' |
Slots
| Slot name | Description |
|---|---|
header | Optional slot that holds a header for the drawer. |
Default slot | Default slot. |
footer | Optional slot that holds footer content for the drawer. |
CSS Properties
CSS Custom Properties provide more fine grain control over component presentation. We advise utilizing existing properties on the component before using these.
| Property | Description | Default |
|---|---|---|
--n-drawer-padding | Controls the padding around the main area (the default slot), using our spacing tokens. | var(--n-space-l) |
--n-drawer-background-color | Controls the background color of the drawer. | var(--n-color-surface) |
--n-drawer-border-color | Controls the color of the drawer's borders. | var(--n-color-border) |
--n-drawer-border-radius | Controls the border radius of the drawer. | 0 |
--n-drawer-border-width | Controls the width of the drawer's borders on every edge. The inline-start edge defaults to 1px to separate the drawer from adjacent content; set this to 0 to remove all borders. | 0 |
--n-drawer-border-inline-start-width | Controls the width of the drawer's inline-start border. Falls back to --n-drawer-border-width, then 1px. | 1px |
--n-drawer-border-inline-end-width | Controls the width of the drawer's inline-end border. | var(--n-drawer-border-width) |
--n-drawer-border-block-start-width | Controls the width of the drawer's block-start border. | var(--n-drawer-border-width) |
--n-drawer-border-block-end-width | Controls the width of the drawer's block-end border. | var(--n-drawer-border-width) |
Dependencies
This component is internally dependent on the following components:
Design guidelinesFor designers
Usage
This section includes guidelines for designers and developers about the usage of this component in different contexts.
Do
- Use for displaying contextual actions or information. For example, when clicking on a table row.
- Use when you don’t want to block users from completing their task in the main view of an application.
- Always include a header that summarizes the actions and information in the drawer.
- Should be closeable through actions like “Done” and “Close”.
Don’t
- Don’t put cards inside the drawer. Consider using the divider component to break up sections instead.
- Don’t reset the drawer’s state when closed if used for settings or filters. Settings should persist.
- Don’t open from within another drawer. Only one drawer can be open at a time.
- Don’t use for presenting a small amount of content or an actions menu, use the popout or dropdown component instead.
Additional considerations
- You can customize the width of the component using
--n-layout-drawer-inline-sizeCSS Custom Property that is offered on Layout component.