AsideTrigger
Rail button that toggles a `<nord-aside-drawer>` inside `<nord-aside>`.
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
drawer | drawer | The id of the `<nord-aside-drawer>` this trigger toggles. Required. | string | '' |
icon | icon | Nord icon name. Shortcut for the common case; equivalent to placing `<nord-icon name="…">` in the default slot. | string | undefined | — |
label | label | Accessible label (used for `aria-label` on the host). | string | '' |
badge | badge | Optional badge content (forwarded to inner `<nord-badge>`). | string | number | undefined | — |
disabled | disabled | Makes the trigger disabled. Takes precedence over the target drawer's `disabled` state. | boolean | false |
tooltip | tooltip | Whether to render a `<nord-tooltip>` showing `label` on hover/focus. Defaults to `true` — set `tooltip="false"` (or omit `label`) to opt out. | boolean | true |
Slots
| Slot name | Description |
|---|---|
Default slot | Overrides the `icon` attribute for custom leading content. |
tooltip | Overrides the tooltip body (falls back to `label`). Lets consumers add icons, shortcut hints, etc. — anything beyond the plain string label. |
Dependencies
This component is internally dependent on the following components:
- <nord-button>
Button
Buttons are used for interface actions. Primary style should be used only once per section for main call-to-action, while other styles can appear more frequently.
- <nord-icon>
Icon
Icons are used to provide additional meaning or in places where text label doesn’t fit. Icon component allows you to display an icon from the Nordicons library.
- <nord-tooltip>
Tooltip
Tooltips are floating containers for displaying additional information for the currently focused element. A tooltip can be useful when you want to e.g. give a hint about an existing Command Menu shortcut.
Usage
This section includes guidelines for designers and developers about the usage of this component in different contexts.
Do
- Use inside
<nord-aside slot="rail">to toggle a specific<nord-aside-drawer>. - Set
drawerto the target drawer’sidandlabelfor the accessible name. - Use the
iconattribute for the common case; place a<nord-icon>(or other element) in the default slot when you need full control. - Use the
badgeattribute to surface a count or status indicator.
Don’t
- Don’t use for navigation-only rail items (no drawer to toggle) — place a plain
<nord-button>or<a>in the rail slot instead. - Don’t set
drawerto a missing or disabled drawerid. The trigger will warn and behave as inert. - Don’t omit
label— the rail button has no visible text, so the accessible name comes from this attribute.
Additional considerations
disabledon the trigger takes precedence over the target drawer’sdisabledstate.- The
activestate mirrors the ancestor<nord-aside>’sactive-drawerand is exposed for styling via[active].
Integration
For integration guidelines, please see Web Components documentation .