Aside
Container for the right-side rail + drawer pattern in the app shell.
Loading...
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
activeDrawer | active-drawer | The id of the currently-active `<nord-aside-drawer>`. Empty string means no drawer is open. Setting to an unknown / disabled id is a silent no-op. | string | '' |
railWidth | rail-width | Width of the rail column in px. | number | 48 |
railGap | rail-gap | Gap between rail and the active drawer panel in px. | number | 0 |
handleClick | handle-click | Controls what clicking (no-drag) the resize handle does. Drag-for-resize is independent of this attribute. | AsideHandleClick | 'toggle' |
Slots
| Slot name | Description |
|---|---|
rail | Free-form content placed in the rail column. |
tooltip-divider | Tooltip anchored to the resize handle on hover. |
Default slot | Default slot for `<nord-aside-drawer>` panels. |
| Event | Detail Type | Description |
|---|---|---|
active-drawer-change | AsideActiveDrawerChangeEvent | Dispatched when `active-drawer` changes, with `activeDrawer` / `previousDrawer` properties. Fires on every transition including open, switch, and close. |
drawer-open | AsideDrawerOpenEvent | Dispatched when transitioning from no active drawer to an active one (i.e. a drawer opened from the closed state). Has an `activeDrawer` property. |
drawer-close | AsideDrawerCloseEvent | Dispatched when all drawers close (active-drawer went from a non-empty value to empty). Has a `previousDrawer` property. |
drawer-resize | AsideDrawerResizeEvent | Dispatched when the active drawer's width changes, with `drawerId` (the specific drawer that changed) and `width` properties. Unlike active-drawer-change, this names a single drawer by id rather than describing a transition between drawers. |
handle-mode-change | AsideHandleModeChangeEvent | Dispatched when the resize handle's mode changes (`col-resize` / `pointer` / `default`). Mirrors the current value to the host's `data-handle-mode` attribute so consumers can also read it synchronously. Has `mode` / `previous` properties. |
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-aside-rail-width | Controls the inline-size of the rail column. | 48px |
--n-aside-rail-gap | Controls the gap between the rail and the active drawer. | var(--n-space-s) |
--n-aside-rail-background-color | Controls the background color of the rail column. | var(--n-color-surface) |
--n-aside-background-color | Controls the background color of the aside container (matches the layout's main area by default). | var(--n-color-background) |
--n-aside-drawers-margin-inline-start | Inline-start margin of the drawers wrapper — creates a gap between the layout's main area and the active drawer card. The resize handle follows this margin so it stays at the drawer's edge. | 0 |
--n-aside-rail-narrow-block-size | Block-size of the rail when it renders as a bottom bar at <768px. | 56px |
--n-aside-rail-narrow-padding-inline | Inline padding inside the bottom rail at <768px. | var(--n-space-m) |
--n-aside-rail-narrow-padding-block | Block padding inside the bottom rail at <768px. | var(--n-space-s) |
--n-aside-rail-narrow-border-block-start-width | Top border width of the bottom rail at <768px. Set to 0 to remove. | 1px |
--n-aside-rail-narrow-border-color | Top border color of the bottom rail at <768px. | var(--n-aside-rail-border-color) |
--n-aside-drawer-floating-inset-block-start | Distance from the viewport top to the floating drawer at <768px (clears the layout header). | var(--n-layout-header-size, 60px) |
--n-aside-drawer-floating-inset-inline | Inline gap between the floating drawer and each viewport edge at <768px. Default 0 = full viewport width. | 0px |
--n-aside-drawer-slide-duration | Duration of the slide-up animation when a drawer opens at <768px. | 300ms |
--n-aside-drawer-slide-easing | Easing of the slide-up animation when a drawer opens at <768px. | cubic-bezier(0.4, 0, 0.2, 1) |
--n-aside-drawer-floating-inset-block-end | Distance from the viewport bottom to the floating drawer at <768px. By default the drawer's bottom edge meets the rail's top edge. | calc(rail-size - bottom-offset) |
--n-aside-drawer-floating-bottom-offset | Subtracts from the floating drawer's inset-block-end to let the drawer extend past the rail's top edge (visual overlap). Default 0. | 0 |
--n-aside-backdrop-background | Background color of the backdrop behind the floating drawer at <768px. | rgb(0 0 0 / 0.4) |
--n-aside-z-backdrop | z-index of the backdrop at <768px (above the sticky footer so it dims the footer too). | calc(var(--n-index-top-bar) + 2) |
--n-aside-z-drawer-floating | z-index of the floating drawer overlay at <768px (above the backdrop). | calc(var(--n-index-top-bar) + 3) |
--n-aside-z-rail-narrow | z-index of the bottom rail at <768px (above the drawer so it remains tappable). | calc(var(--n-index-top-bar) + 4) |
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 as the right-side rail + drawer container in the app shell.
- Mix
<nord-aside-trigger>s with plain<nord-button>s or<a>s in therailslot — triggers toggle drawers, plain buttons/links are for navigation-only items. - Place one or more
<nord-aside-drawer>panels in the default slot; the aside shows the one whoseidmatchesactive-drawer. - Let consumers drive the open state via the
active-drawerattribute and theactive-drawer-changeevent.
Don’t
- Don’t put more than one
<nord-aside>on the page — it owns app-shell-level state. - Don’t open multiple drawers at once. The aside is single-active by design.
- Don’t wrap navigation-only rail items in
<nord-aside-trigger>— use a plain<nord-button>or<a>instead.
Additional considerations
- Owns the single-active drawer state and the inline-start resize handle. Drag-for-resize is independent of
handle-click, which only controls the click (no-drag) behaviour:toggle,close, ornone. - Width and gap of the rail column are configurable via
--n-aside-rail-widthand--n-aside-rail-gap. - Emits
active-drawer-changewith{ activeDrawer, previousDrawer }anddrawer-resizewith{ drawerId, width }.
Integration
For integration guidelines, please see Web Components documentation .