MenuItem
MenuItem represents individual clickable items within dropdown menus and other menu components. Each menu item can display text, icons, and respond to clicks with either navigation or custom actions, making it the building block for interactive menu systems.Key features:
- Action handling: Support both navigation (
toproperty) and custom click handlers - Visual feedback: Built-in active, hover, and disabled states for clear user interaction
- Icon support: Optional icons with flexible positioning (start or end)
- Menu integration: Designed to work seamlessly within
DropdownMenuandSubMenuItemhierarchies
Usage pattern:
Always used within menu containers like
DropdownMenu. Use to for navigation or onClick for custom actions. For complex menu structures, combine with MenuSeparator and SubMenuItem components.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>Example: 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>enabled (default: true)
This boolean property value indicates whether the component responds to user events (
true) or not (false).icon
This property names an optional icon to display with the menu item. You can use component-specific icons in the format "iconName:MenuItem".
<App>
<DropdownMenu label="DropdownMenu">
<MenuItem icon="drive">Item 1</MenuItem>
<MenuItem icon="trash">Item 2</MenuItem>
<MenuItem icon="email">Item 3</MenuItem>
</DropdownMenu>
</App>Example: icon
<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:
| Value | Description |
|---|---|
start | The icon will appear at the start (left side when the left-to-right direction is set) (default) |
end | The icon will appear at the end (right side when the left-to-right direction is set) |
<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>Example: iconPosition
<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. If not set, the component will not display a label.
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>Example: click
<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
Theme Variables
| Variable | Default Value (Light) | Default Value (Dark) |
|---|---|---|
| backgroundColor-MenuItem | $backgroundColor-dropdown-item | $backgroundColor-dropdown-item |
| backgroundColor-MenuItem--active | $backgroundColor-dropdown-item--active | $backgroundColor-dropdown-item--active |
| backgroundColor-MenuItem--active--hover | none | none |
| backgroundColor-MenuItem--hover | $backgroundColor-dropdown-item--hover | $backgroundColor-dropdown-item--hover |
| color-MenuItem | $textColor-primary | $textColor-primary |
| color-MenuItem--active | $color-primary | $color-primary |
| color-MenuItem--active--hover | none | none |
| color-MenuItem--disabled | $textColor--disabled | $textColor--disabled |
| color-MenuItem--hover | inherit | inherit |
| fontFamily-MenuItem | $fontFamily | $fontFamily |
| fontSize-MenuItem | $fontSize-small | $fontSize-small |
| gap-MenuItem | $space-2 | $space-2 |
| paddingHorizontal-MenuItem | $space-3 | $space-3 |
| paddingVertical-MenuItem | $space-2 | $space-2 |