Menu Item

Menu items represent choices or actions in the menu.
Works with any type of content, including multiple content slots
Automatically resolves to correct HTML tag
Similar components:
ButtonLinkActionable


Usage

By default, MenuItem is an action element that just renders its children.

States

MenuItem can be used for pickers or selection menus and supports selected property for that case. At the same time it can be also disabled for the user selection.

Sizes

MenuItem comes in 3 sizes: small, medium (default) and large, which change the spacing and sizes of elements inside it.

Composition

MenuItem can be used to build custom menu elements since it provides startSlot and endSlot. It can be used from building simple text menus to complex notification layouts.

Since one of the most frequently used scenarios for the startSlot is to use it for displaying icons - it's supported out of the box. When used, icon overrides startSlot property so both of them can't be displayed at the same time.

Whenever your menu items are used as a standalone component, you can enable its border radius with roundedCorners property.

Accessibility

Button click event triggers on both, Space and Enter key presses.

Properties

NameTypeDefaultRequiredComment
sizesmall, medium, largemediumfalse
childrenReactNode-false
roundedCornersboolean-false
endSlotReactNode-false
startSlotReactNode-falseCan't be used with icon
iconReactNode-falseIcon svg node, can't be used with startSlot
selectedboolean-false
onClick(event) => {}-false
classNamestring-falseclassName for the root element
attributesobject-falseAttributes for the root element

MenuItem link properties, when used with href property:

NameTypeDefaultRequiredComment
hrefstring-false

MenuItem button properties, when used without href property:

NameTypeDefaultRequiredComment
typebutton, submit, resetbuttonfalse
disabledboolean-false
Previous
Next