A menu / navigation list. Lays out nana-menu-item (and nana-menu-label) children, manages roving-tabindex keyboard navigation, and bubbles nana-select when an item is chosen.
Actions
Edit
Delete
Show code Copy < nana-menu style = "max-width:220px" > < nana-menu-label >Actions</ nana-menu-label > < nana-menu-item >Edit</ nana-menu-item > < nana-menu-item >Delete</ nana-menu-item > </ nana-menu >
npm install @nana-tec/ui-components
import " @nana-tec/ui-components/menu " ;
< nana-menu style = " max-width:220px " >
< nana-menu-label > Actions </ nana-menu-label >
< nana-menu-item > Edit </ nana-menu-item >
< nana-menu-item > Delete </ nana-menu-item >
Menu items support shortcut, active, selected, destructive, submenu,
and prefix icons.
Actions
Paste
Share
Delete
Show code Copy < nana-menu bordered style = "width:15rem" > < nana-menu-label >Actions</ nana-menu-label > < nana-menu-item value = "copy" shortcut = "⌘C" > < nana-icon slot = "prefix" name = "content_copy" ></ nana-icon > Copy </ nana-menu-item > < nana-menu-item value = "paste" shortcut = "⌘V" >Paste</ nana-menu-item > < nana-menu-item value = "share" submenu >Share</ nana-menu-item > < nana-menu-item value = "delete" destructive shortcut = "⌘⌫" >Delete</ nana-menu-item > </ nana-menu >
Home
Docs
Pricing
Show code Copy < nana-menu orientation = "horizontal" > < nana-menu-item value = "home" active >Home</ nana-menu-item > < nana-menu-item value = "docs" >Docs</ nana-menu-item > < nana-menu-item value = "pricing" >Pricing</ nana-menu-item > </ nana-menu >
Properties Property Attribute Type Default Description bordered— booleanfalsePanel look — border + shadow (e.g. inside a dropdown) orientation— MenuOrientation'vertical'Layout direction variant— MenuVariant | undefined—Panel flavour — sets the frosted-glass popover look
Events Event Description nana-selectBubbled from a chosen item (`detail.value`)
Slots Slot Description (default)`nana-menu-item` / `nana-menu-label` children
CSS parts Part Description ::part(menu)The list container
CSS custom properties Property Description --nana-menu-bgBackground --nana-menu-paddingInner padding
Event Type Description nana-selectCustomEventBubbled from a chosen item (detail.value)
Slot Description (default)nana-menu-item / nana-menu-label children
Variable Default Description --nana-menu-bg— Background --nana-menu-padding— Inner padding
Part Description menuThe list container
Keyboard accessible Screen-reader labels Focus-visible states ARIA roles and states WCAG 2.2 AA contrast Explore Menu interactively Every state, prop, and edge case — with live controls — in Storybook.
