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:
Composition New since Jul 24, 2026
A drawer can be assembled from three structural light-DOM parts plus an optional standalone close part, all placed as direct children of nord-drawer. The structural parts assign themselves to the right zones, keeping the header and footer fixed while the body scrolls. The nord-drawer root stays in shadow DOM.
import "@nordhealth/components/lib/DrawerHeader"
import "@nordhealth/components/lib/DrawerBody"
import "@nordhealth/components/lib/DrawerClose"
import "@nordhealth/components/lib/DrawerFooter"
nord-drawer
├── nord-drawer-header fixed header zone (a lighter alternative to slotting a nord-header)
├── nord-drawer-body scrolling content zone; the `padding` attribute applies here
├── nord-drawer-footer fixed footer zone, wrapped in a nord-footer
└── nord-drawer-close standalone close control; place it anywhere
<nord-drawer slot="drawer">
<nord-drawer-header>
<h3 class="n-typescale-l">Drawer header</h3>
<nord-drawer-close></nord-drawer-close>
</nord-drawer-header>
<nord-drawer-body class="n-typeset">…</nord-drawer-body>
<nord-drawer-footer>
<nord-button-group variant="spaced">
<nord-drawer-close>
<nord-button>Cancel</nord-button>
</nord-drawer-close>
<nord-button variant="primary">Done</nord-button>
</nord-button-group>
</nord-drawer-footer>
</nord-drawer>
The parts are additive — the header and footer slots still work, so you can keep slotting a richer nord-header into the header for titles with actions. Bring your own heading element in nord-drawer-header (the part is layout only).
Composable close New since Jul 24, 2026
Use nord-drawer-close anywhere inside a drawer to remove the nearest nord-drawer from its layout. Left empty, it renders a localized close icon button. Wrap your own control to turn it into a close trigger without replacing that control:
<nord-drawer slot="drawer">
<nord-drawer-header>
<h3 class="n-typescale-l">Drawer header</h3>
<nord-drawer-close></nord-drawer-close>
</nord-drawer-header>
<nord-drawer-body>…</nord-drawer-body>
<nord-drawer-footer>
<nord-drawer-close>
<nord-button>Done</nord-button>
</nord-drawer-close>
</nord-drawer-footer>
</nord-drawer>
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 header.
nord-drawer-closesupplies a localized accessible name for its default icon button; consumer-provided controls must have their own accessible name. - 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-drawer></nord-drawer>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) |
Parts
This component is made up of the following parts.
Drawer Body
The main content region of a composed Drawer. This is
the scrolling zone between the fixed header and footer; the drawer's padding
attribute applies here.
It occupies the drawer's default slot, so place it as a direct child of
nord-drawer (no slot attribute).
<nord-drawer-body></nord-drawer-body>Slots
| Slot name | Description |
|---|---|
Default slot | The drawer body content. |
Drawer Close
A standalone close control for a composed Drawer.
When left empty it renders a default close icon button. Give it your own
control and it becomes a transparent wrapper that removes the nearest
nord-drawer when clicked.
<nord-drawer-close></nord-drawer-close>Props
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
label | label | Overrides the accessible label of the default close button. | string | undefined | — |
Slots
| Slot name | Description |
|---|---|
Default slot | Optional custom close control. When empty, a default icon button is rendered. |
Drawer Footer
The footer region of a composed Drawer. A fixed zone at
the bottom of the drawer, typically holding actions.
Auto-assigns itself to the drawer's footer slot, so place it as a direct
child of nord-drawer (no slot attribute needed).
<nord-drawer-footer></nord-drawer-footer>Slots
| Slot name | Description |
|---|---|
Default slot | The drawer footer content. |
Drawer Header
The header region of a composed Drawer. A fixed zone
at the top of the drawer; bring your own heading element or use it directly
for a title.
Auto-assigns itself to the drawer's header slot, so place it as a direct
child of nord-drawer (no slot attribute needed).
<nord-drawer-header></nord-drawer-header>Slots
| Slot name | Description |
|---|---|
Default slot | The drawer header content. |
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.