Drawer
Drawer is used to display context-sensitive actions and information. Drawer doesn’t block users from completing their task, like a modal would.
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
padding | padding | Controls the padding of the drawer component. | 'm' | 'none' | 'm' |
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) |
Dependencies
This component is internally dependent on the following components:
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.
Integration
For integration guidelines, please see Web Components documentation .