Skip to content
Nana UI

Menu Item

View .md Download

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”
Item one Item two

Installation

Section titled “Installation”
Terminal window
npm install @nana-tec/ui-components

Import

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.

Home Copy Delete

API

Section titled “API”

Properties

PropertyAttributeTypeDefaultDescription
active—booleanfalseHighlight as the current item (soft)
destructive—booleanfalseRender in a destructive (danger) style
disabled—booleanfalseDisable the item
href—string | undefined—Render as a link
selected—booleanfalseChosen state — accent fill + checkmark
shortcut—string | undefined—Keyboard shortcut shown on the right
submenu—booleanfalseShow a trailing submenu arrow
value—string''Value emitted on selection

Events

EventDescription
nana-selectFired on activation (`detail.value`)

Slots

SlotDescription
(default)The label
prefixLeading icon (~20px)
suffixTrailing content (falls back to the `shortcut` attribute)

CSS parts

PartDescription
::part(item)The interactive row

CSS custom properties

PropertyDescription
--nana-menu-on-accentText colour on the highlighted/selected row

Events

Section titled “Events”
EventTypeDescription
nana-selectCustomEventFired on activation (detail.value)

Slots

Section titled “Slots”
SlotDescription
(default)The label
prefixLeading icon (~20px)
suffixTrailing content (falls back to the shortcut attribute)

CSS Variables

Section titled “CSS Variables”
VariableDefaultDescription
--nana-menu-on-accent—Text colour on the highlighted/selected row

CSS Parts

Section titled “CSS Parts”
PartDescription
itemThe interactive row (<a> or <button>)
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