Skip to content

Context Menu Item

@astryxdesign/core v0.7.1 · ContextMenuItem

ContextMenuItem Props ​

NameTypeDefaultDescription
labelstring | number—Primary label of the row. Use the label slot for rich content.
descriptionstring—Secondary text rendered below the label. Use the description slot for rich content.
iconstring | Component—Icon rendered before the label: a CSS icon class or a component that draws the SVG. Use the icon slot for arbitrary content.
endContentstring | number—Plain text rendered after the label area. Use the endContent slot for rich trailing content such as a badge.
hrefstring—Address the row navigates to; the row then renders as an anchor.
target'_blank' | '_self'—Link target, only used with href.
relstring—Link relationship, only used with href.
isDisabledbooleanfalseWhether the row is disabled. A disabled row is dimmed, skipped by arrow keys and typeahead, and cannot be activated.
hasCloseOnSelectbooleantrueWhether activating the row closes the menu.
variant'default' | 'destructive''default'Visual variant of the row.

Events ​

NamePayloadDescription
clickMouseEventFired when the row is activated, with the click that activated it.

Slots ​

  • label: rich content replacing the label prop.
  • icon: leading content replacing the icon prop.
  • description: rich content replacing the description prop.
  • endContent: trailing content after the label area.

The row is role="menuitem", so the keyboard belongs to the menu above it: arrow keys, Home, End, and typeahead move between rows.