AsideDrawer
A drawer panel inside `<nord-aside>`.
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
defaultWidth | default-width | Initial width in px. The persisted value overrides this on load; if `default-width` changes between sessions, the persisted value is re-seeded to the new default. | number | 420 |
minWidth | min-width | Resize clamp lower bound in px. | number | 280 |
maxWidth | max-width | Resize clamp upper bound in px. Defaults to `Number.MAX_SAFE_INTEGER` so an unset `max-width` doesn't constrain the drawer — the consumer's layout (or the rail / nav anchoring) determines the practical ceiling. Set an explicit value to clamp. Not reflected: an unset cap is the `Number.MAX_SAFE_INTEGER` sentinel, which must never render into the DOM as `max-width="9007199254740991"`. | number | — |
maxFullscreenWidth | max-fullscreen-width | Maximum inline-size in px the drawer can reach when `[fullscreen]` is active. Independent of `max-width` (which only caps the docked drag / keyboard resize) — fullscreen typically wants to grow larger than the docked maximum. Defaults to `Number.MAX_SAFE_INTEGER` so an unset value lets fullscreen fill all available room (bounded by the layout's left-cap rule in `<nord-aside>`). Not reflected: an unset cap is the `Number.MAX_SAFE_INTEGER` sentinel, which must never render into the DOM. | number | — |
disabled | disabled | When set, the drawer cannot be opened. Programmatic opens are silently ignored; if the drawer is already open and this flips on, the drawer stays open until closed normally. | boolean | false |
fullscreen | fullscreen | Reflected. Phase 3 wires the overlay sizing internally. | boolean | false |
floating | floating | Set by the parent `<nord-aside>` when the drawer renders as a narrow floating overlay (rather than a docked region). When `true` the host becomes an accessible modal dialog (`role="dialog"` + `aria-modal`); when `false` the host is a `role="region"` landmark. Drive this only through the parent — it owns the floating-vs-docked decision. | boolean | false |
Slots
| Slot name | Description |
|---|---|
Default slot | Default slot. Place arbitrary drawer content here. |
| Event | Detail Type | Description |
|---|---|---|
width-change | AsideDrawerWidthChangeEvent | Dispatched when the drawer's width changes. The event exposes `width` (the new applied inline-size in px) and `source` (`'drag' | 'keyboard' | 'attribute' | 'storage'`). |
Usage
This section includes guidelines for designers and developers about the usage of this component in different contexts.
Do
- Place inside
<nord-aside>’s default slot, one per surface the user can toggle. - Give each drawer a unique
id—<nord-aside>’sactive-drawerattribute matches against it. - Put arbitrary content in the default slot: a
<nord-drawer>, a custom component, plain markup, an<iframe>you instantiate yourself. - Use
default-width,min-width, andmax-widthto define the resize range; the component persists the user’s chosen width per drawerid.
Don’t
- Don’t use outside of
<nord-aside>— the parent owns open/closed state. - Don’t manage the panel’s visibility yourself. The drawer is always mounted and toggled via the ancestor’s
active-drawer. - Don’t share an
idbetween drawers — width persistence and trigger wiring both key off it.
Additional considerations
- Always mounted. Shown when the ancestor
<nord-aside>’sactive-drawermatches this drawer’sid, otherwise hidden via the native[hidden]attribute. - The component sizes the panel and owns its open/closed state; the consumer owns the contents.
- Emits
width-changewith{ width, source }wheresourceis'drag' | 'keyboard' | 'attribute' | 'storage'. - Width is persisted in
localStorageunder the drawer’sid. Ifdefault-widthchanges between sessions, the persisted value is re-seeded to the new default.
Integration
For integration guidelines, please see Web Components documentation .