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 borderedborderedbooleanfalsePanel look — border + shadow (e.g. inside a dropdown) orientationorientationMenuOrientation'vertical'Layout direction variantvariantMenuVariant | 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 --nana-menu-blurBackdrop blur behind the panel --nana-menu-max-heightPanel height before its items scroll --nana-menu-radiusPanel corner radius
Event Type Description nana-selectCustomEventBubbled from a chosen item (detail.value)
Slot Description (default)nana-menu-item / nana-menu-label children
Variable Description --nana-menu-bgBackground --nana-menu-paddingInner 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.
