# 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 ```html

Export

Export as PDF

Export as CSV

Delete

``` ## 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"` and `aria-expanded` attributes - **Capability-based** — Detects touch capability and adapts interaction model accordingly - **Mobile Sheet** — Converts to a mobile sheet stack navigation on small screens, unless the parent `nord-dropdown` has the `always-floating` property set. ## Methods - `close()` — Programmatically close the submenu ## Slots - `trigger` — The element that opens the submenu (typically `nord-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 ## Examples ### Basic ```html

Copy link

Send by email

Get QR code

Export

Export as PDF

Export as CSV

Export as JSON

More options

Duplicate

Move to folder

Rename

Delete

``` ### With Groups ```html

Actions

Export

PDF

CSV

JSON

Low

Medium

High

Delete

``` ### With Custom Content ```html

Workspace

Rename

Cancel

Save

Delete

``` ### Nested Submenus ```html

Export

Export as PDF

Export as CSV

Advanced options

Custom format

With metadata

Compressed

Delete

``` ### Always Floating ```html

Export

Export as PDF

Export as CSV

Advanced options

Custom format

With metadata

Compressed

Delete

``` ## API Reference ### Events - **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. ### Slots - **trigger** — The element that opens the submenu (typically nord-dropdown-item). - **(default)** — The submenu content items. ### Methods - **close** — `close() => Promise` — Close the submenu programmatically. Returns a promise that resolves when the close animation completes. ### Dependencies - `popout`