MenuItem
MenuItem accepts a main text label, leading and trailing content, supporting text, shortcut hints, and submenu indicators. focused and selected change its appearance; the application owns actual focus and selection.
onClick alone does not provide keyboard activation or menu semantics. Native attributes and refs are not exposed by this preset. Use Dropdown.ActionItem for accessible commands. Shortcut hints and hasSubMenu are visual; they do not register handlers or create a submenu. isTooltipOpen is currently accepted but unused.
"danger" | "default" | "placeholder"
default:"default"
Default, danger, or placeholder row styling.
string
Class applied to the row.
ReactNode
Supporting text beside the main label.
"left" | "right"
default:"left"
Position of the supporting text.
boolean
default:"false"
Disables activation and applies disabled styling.
boolean
default:"false"
Applies focused appearance without moving DOM focus.
Shows a submenu chevron; does not create a submenu.
Nullable<string[]>
Visible shortcut hints. Register handlers in the application.
ReactNode
Trailing action elements.
ThemeColor | null
Theme color for the leading icon.
boolean
default:"true"
Reveals trailing action elements only on hover.
Applies the open treatment to the submenu chevron.
boolean
Accepted for compatibility; currently has no effect.
ReactNode
Custom leading content.
IconComponent | null
Leading icon component.
((event: MouseEvent<HTMLDivElement, MouseEvent>) => void)
Pointer activation callback. The row itself does not add keyboard or menu semantics.
((event: MouseEvent<HTMLDivElement, MouseEvent>) => void)
Pointer-entry callback on the row.
((event: MouseEvent<HTMLDivElement, MouseEvent>) => void)
Pointer-exit callback on the row.
ReactNode
Custom trailing content.
IconComponent | null
Trailing icon component.
boolean
default:"false"
Applies selected appearance without owning selection state.
string
Value of the row’s data-testid attribute.
ReactNode
required
Main row label.
boolean
default:"false"
Places leading content in an icon container.
boolean
default:"true"
Adds a background to the leading icon container.
MenuItemAvatar
MenuItemAvatar places an Avatar before a text label. Its avatar accepts name, src, colorSeed, size, and shape. Omit it to render no avatar.
Dropdown.OptionItem instead.
"danger" | "default" | "placeholder"
default:"default"
Default, danger, or placeholder row styling.
Pick<AvatarProps, "size" | "name" | "shape" | "src" | "colorSeed"> | null
Avatar name, source, color seed, size, and shape. Omit to hide the avatar.
string
Class applied to the row.
ReactNode
Supporting text beside the main label.
Shows a submenu chevron; does not create a submenu.
ReactNode
Trailing action elements.
boolean
default:"true"
Reveals trailing action elements only on hover.
boolean
Accepted for compatibility; currently has no effect.
((event: MouseEvent<HTMLDivElement, MouseEvent>) => void)
Pointer activation callback. The row itself does not add keyboard or menu semantics.
((event: MouseEvent<HTMLDivElement, MouseEvent>) => void)
Pointer-entry callback on the row.
((event: MouseEvent<HTMLDivElement, MouseEvent>) => void)
Pointer-exit callback on the row.
string
Value of the row’s data-testid attribute.
string
required
Main row label.
MenuItemDraggable
MenuItemDraggable renders a menu row that can show a drag grip. The application supplies drag behavior. gripMode defaults to never, which shows no grip; always shows the grip, and onHover swaps LeftIcon for the grip while the row is hovered, so it shows nothing without a LeftIcon. isDragDisabled affects the appearance, not external drag handlers.
isTooltipOpen and isHoverDisabled are currently accepted but unused. Provide an accessible reordering interface in the surrounding application.
"danger" | "default" | "placeholder"
default:"default"
Default, danger, or placeholder row styling.
string
Class applied to the row.
ReactNode
Supporting text beside the main label.
"always" | "never" | "onHover"
default:"never"
Grip visibility: never, always, or onHover. onHover swaps LeftIcon for the grip on hover and shows no grip without LeftIcon. Does not implement dragging.
ReactNode
Trailing action elements.
boolean
default:"false"
Disables drag appearance without installing or removing drag handlers.
boolean
Accepted for compatibility; currently has no effect.
boolean
default:"true"
Reveals trailing action elements only on hover.
boolean
Accepted for compatibility; currently has no effect.
IconComponent
Leading icon component.
(() => void)
Pointer activation callback. The row itself does not add keyboard or menu semantics.
ReactNode
required
Main row label.
boolean
default:"false"
Places leading content in an icon container.
MenuItemSuggestion
MenuItemSuggestion renders a list item with optional icon and supporting text. Supplying onClick gives it button semantics, a tab stop, and Enter/Space activation. The li root then has the button role instead of listitem, so keep clickable suggestions in a ul with role="none": the markup stays valid and assistive technology does not expect list items. selected applies visual styling and does not implement a listbox selection model.
string
Class applied to the row.
string
Supporting text beside the main label.
"left" | "right"
default:"left"
Position of the supporting text.
IconComponent | null
Leading icon component.
((event: MouseEvent<HTMLLIElement, MouseEvent>) => void)
Activation callback. When supplied, the row gains button semantics, a tab stop, and Enter/Space activation.
boolean
Applies selected styling. The application owns selection.
string
required
Main row label.
boolean
default:"false"
Places leading content in an icon container.