MenuItem

This property represents a leaf item in a menu hierarchy. Clicking the item triggers an action.

See the DropdownMenu component for using this component in menus.

Properties

active (default: false)

This property indicates if the specified menu item is active.

<App>
  <DropdownMenu label="DropdownMenu">
    <MenuItem icon="drive" active="true">Item 1</MenuItem>
    <MenuItem icon="trash">Item 2</MenuItem>
    <MenuItem icon="email">Item 3</MenuItem>
  </DropdownMenu>
</App>

icon

This property names an optional icon to display with the menu item.

<App>
  <DropdownMenu label="DropdownMenu">
    <MenuItem icon="drive">Item 1</MenuItem>
    <MenuItem icon="trash">Item 2</MenuItem>
    <MenuItem icon="email">Item 3</MenuItem>
  </DropdownMenu>
</App>

iconPosition (default: "start")

This property allows you to determine the position of the icon displayed in the menu item.

Available values:

<App>
  <DropdownMenu label="DropdownMenu">
    <MenuItem icon="drive" iconPosition="start">Item 1</MenuItem>
    <MenuItem icon="trash" iconPosition="end">Item 2</MenuItem>
    <MenuItem icon="email">Item 3</MenuItem>
  </DropdownMenu>
</App>

label

This property sets the label of the component.

to

This property defines the URL of the menu item. If this property is defined (and the click event does not have an event handler), clicking the menu item navigates to this link.

Events

click

This event is triggered when the MenuItem is clicked.

This event is fired when the user clicks the menu item. With an event handler, you can define how to respond to the user's click. If this event does not have an associated event handler but the to property has a value, clicking the component navigates the URL set in to.

If both properties are defined, click takes precedence.

<DropdownMenu label="DropdownMenu">
  <MenuItem onClick="toast('Item 1 clicked')">Item 1</MenuItem>
  <MenuItem onClick="toast('Item 2 clicked')">Item 2</MenuItem>
  <MenuItem onClick="toast('Item 3 clicked')">Item 3</MenuItem>
</DropdownMenu>

Exposed Methods

This component does not expose any methods.

Styling

The MenuItem component uses these theme variables to customize its appearance:

• color
• backgroundColor
• fontFamily
• fontSize
• gap: The gap between the item label and icon
• paddingHorizontal
• paddingVertical

The color and backgroundColor theme variables have variants for the --hover state.

Theme Variables