Navigation
Menu Item
An item within a nana-menu: icon + label + shortcut, with selected (checkmark), destructive, disabled and submenu states. Renders as a button, or a link when href is set, and bubbles nana-select.
Preview
Section titled “Preview”<nana-menu style="max-width: 220px">
<nana-menu-item>Item one</nana-menu-item>
<nana-menu-item>Item two</nana-menu-item>
</nana-menu>Installation
Section titled “Installation”npm install @nana-tec/ui-componentsImport
Section titled “Import”import "@nana-tec/ui-components/menu-item";Basic usage
Section titled “Basic usage”<nana-menu style="max-width:220px"> <nana-menu-item>Item one</nana-menu-item> <nana-menu-item>Item two</nana-menu-item></nana-menu>Item states
Section titled “Item states”Items support active, selected, shortcut, destructive, and a prefix
icon slot.
<nana-menu bordered style="width: 15rem">
<nana-menu-item value="home" active>Home</nana-menu-item>
<nana-menu-item value="copy" shortcut="⌘C">
<nana-icon slot="prefix" name="content_copy"></nana-icon>
Copy
</nana-menu-item>
<nana-menu-item value="delete" destructive shortcut="⌘⌫">
Delete
</nana-menu-item>
</nana-menu>Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
active | active | boolean | false | Highlight as the current item (soft) |
destructive | destructive | boolean | false | Render in a destructive (danger) style |
disabled | disabled | boolean | false | Disable the item |
href | href | string | undefined | — | Render as a link |
selected | selected | boolean | false | Chosen state — accent fill + checkmark |
shortcut | shortcut | string | undefined | — | Keyboard shortcut shown on the right |
submenu | submenu | boolean | false | Show a trailing submenu arrow |
value | value | string | '' | Value emitted on selection |
Events
| Event | Description |
|---|---|
nana-select | Fired on activation (detail.value) |
Slots
| Slot | Description |
|---|---|
(default) | The label |
prefix | Leading icon (~20px) |
suffix | Trailing content (falls back to the shortcut attribute) |
CSS parts
| Part | Description |
|---|---|
::part(item) | The interactive row |
CSS custom properties
| Property | Description |
|---|---|
--nana-menu-on-accent | Text colour on the highlighted/selected row |
--nana-menu-item-font-size | Item text size |
--nana-menu-item-radius | Item corner radius |
--nana-menu-on-danger | Text colour used on the danger item's fill |
Events
Section titled “Events”| Event | Type | Description |
|---|---|---|
nana-select | CustomEvent | Fired on activation (detail.value) |
| Slot | Description |
|---|---|
(default) | The label |
prefix | Leading icon (~20px) |
suffix | Trailing content (falls back to the shortcut attribute) |
CSS Variables
Section titled “CSS Variables”| Variable | Description |
|---|---|
--nana-menu-on-accent | Text colour on the highlighted/selected row |
CSS Parts
Section titled “CSS Parts”| Part | Description |
|---|---|
item | The interactive row (<a> or <button>) |
Related components
Section titled “Related components”Storybook
Section titled “Storybook” Explore Menu Item interactively Every state, prop, and edge case — with live controls — in Storybook.
View in Storybook