AriaMenuItem
type AriaMenuItem = Omit<ItemProps<typeof Item>, "children"> & object;
The structure of a menu item that can be used to create a dropdown menu.
Type Declaration
| Name | Type | Description |
|---|---|---|
key | string | The unique key for the item. |
label | React.ReactNode | The label of the item. |
description? | React.ReactNode | Optional description of the item. This will be displayed below the menu item. |
testId? | string | The test id for the item. |
onItemClick()? | () => void | If set, this function will be called when the user clicks this item. |
closeMenuOnItemClick? | boolean | If set to false, the menu will not close when the user clicks this item. |
subMenu? | AriaSubMenu | If set, clicking the item runs onItemClick (if provided) and opens a submenu in place. The submenu can render a nested list of AriaMenuItem or arbitrary React content, and a back button is rendered at the top of the menu to return to the previous level. The menu is not closed when a submenu is opened. |
icon? | React.ReactNode | The icon to display next to the item. |
iconPosition? | "start" | "end" | Where to place the icon relative to the label. 'start' (the default) renders the icon before the label; 'end' renders it after the label, pushed to the far end of the item. |
alternativeHoverClassName? | string | Class name that is used to override the default hover style. |
alternativeHoverStyle? | CSSProperties | Style that is used to override the default hover style. |
className? | string | The class name for the item. |
style? | CSSProperties | The style for the item. |
isActive? | boolean | Sets the data-active attribute to true and applies styling |
isDisabled? | boolean | If set to true, the item will be disabled. |
isDanger? | boolean | If set to true, the item uses the danger text color. |
isChecked? | boolean | Marks the item as a checkable menu item and reports the given state. |
withTopDivider? | boolean | If set to true, a divider will be rendered above the item. |
withBottomDivider? | boolean | If set to true, a divider will be rendered below the item. |