Menu

Popover action list with roving-tabindex keyboard navigation and a danger item variant.

Preview

Row actions

Preview

EditDuplicateAssign…

Delete

HTMLReact

Copy

<div class="nx-menu" role="menu" aria-label="Row actions" aria-orientation="vertical"><button class="nx-menu__item nx-menu__item--active" type="button" role="menuitem" tabindex="0">Edit</button><button class="nx-menu__item" type="button" role="menuitem" tabindex="-1">Duplicate</button><button class="nx-menu__item nx-menu__item--disabled" type="button" role="menuitem" aria-disabled="true" tabindex="-1">Assign…</button><div class="nx-menu__sep" role="separator"></div><button class="nx-menu__item nx-menu__item--danger" type="button" role="menuitem" tabindex="-1">Delete</button></div>

Copy

<NxMenu items={[
  { label: "Edit", active: true, onClick: onEdit },
  { label: "Duplicate", onClick: onDuplicate },
  { label: "Assign…", disabled: true },
  { separator: true },
  { label: "Delete", danger: true, onClick: onDelete },
]} />

API

React props (NxKit)

React (NxKit) props

Prop	Type	Default	Required	Description
items	NxMenuItem[]	—	Required	label/icon/active/onClick/separator/disabled/danger per item.
onClose	()=>void	undefined		Called on Escape — the consumer restores focus to the trigger.
autoFocus	boolean	false		Focus the first non-disabled item on mount.

Classes

Framework-agnostic classes

Class	Description
.nx-menu	role=menu popover, overlay shadow
.nx-menu__item	role=menuitem button
.nx-menu__item--active	Accent tint + weight
.nx-menu__item--danger	Danger text, danger-tint hover
.nx-menu__item--disabled	aria-disabled, skipped by roving nav
.nx-menu__sep	role=separator divider

Accessibility

• role="menu" / items role="menuitem"; one roving tab stop (first non-disabled item), ArrowUp/Down wrap, Home/End, Escape calls onClose.
• Disabled items are aria-disabled (not the disabled attribute, since they're <button type="button"> acting as menu items) and are skipped by the roving walk.

Do / Don’t

• ✓Do: Put destructive actions last, marked danger.✕Don’t: Don't put more than ~8 items in one menu — group or paginate.

Related

Tabs Breadcrumb

View in spec →

View source: registry.js ↗