DropdownSubmenu
Dropdown submenu nests a secondary menu within a parent dropdown. The trigger slot contains the item that opens the submenu, and the default slot contains the submenu items. Supports both hover (non-touch) and click (touch-devices/accessibility) interactions. On small screens, uses mobile stack navigation: tapping a submenu trigger replaces the dropdown's visible content with the submenu's items and shows a back button.
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
mobileActive | mobile-active | boolean | false |
Slots
| Slot name | Description |
|---|---|
trigger | The element that opens the submenu (typically nord-dropdown-item). |
Default slot | The submenu content items. |
Methods
| Method name | Parameters | Description |
|---|---|---|
close() => Promise<TransitionEvent | void> | N/A | Close the submenu programmatically. Returns a promise that resolves when the close animation completes. |
| Event | Detail Type | Description |
|---|---|---|
nord-submenu-navigate | CustomEvent | Fired when mobile stack navigation activates this submenu. |
open | NordEvent | Forwarded from the internal nord-popout. |
close | NordEvent | Forwarded from the internal nord-popout. |
Dependencies
This component is internally dependent on the following components:
Dropdown Submenu
Dropdown submenu nests a secondary menu within a dropdown. It automatically handles opening on hover, closing on outside click, keyboard navigation, and manages accessibility attributes.
Usage
<nord-dropdown>
<nord-button slot="toggle">Menu</nord-button>
<nord-dropdown-submenu>
<nord-dropdown-item slot="trigger">
Export
<nord-icon slot="end" name="arrow-right"></nord-icon>
</nord-dropdown-item>
<nord-dropdown-item>Export as PDF</nord-dropdown-item>
<nord-dropdown-item>Export as CSV</nord-dropdown-item>
</nord-dropdown-submenu>
<nord-dropdown-item>Delete</nord-dropdown-item>
</nord-dropdown>
Behavior
- Opens on hover (non-touch devices) — Hovering over the trigger item opens the submenu
- Opens on click (touch devices & accessibility) — Clicking the trigger toggles the submenu open/closed
- Keyboard navigation — ArrowRight or Enter to open, ArrowLeft to close, first item auto-focused
- Closes siblings — Opening one submenu automatically closes other open submenus
- Closes on regular item hover — Hovering a non-trigger item closes the submenu
- Accessibility — Automatically manages
aria-haspopup="menu"andaria-expandedattributes - Capability-based — Detects touch capability and adapts interaction model accordingly
Methods
close()— Programmatically close the submenu
Slots
trigger— The element that opens the submenu (typicallynord-dropdown-item, but any element works)- default — The submenu content items (can be
nord-dropdown-item,nord-dropdown-group, or any custom HTML/components)
Content Flexibility
The submenu slot accepts any content type, not just dropdown items. This enables use cases like:
- Form inputs (checkboxes, radio buttons, inputs)
- Custom buttons and layouts
- Mixed content (items grouped with custom controls)
- Any HTML structure that makes sense for your use case
Integration
For integration guidelines, please see Web Components documentation .