# EuiMenuItemComponent

**Type:** component



Represents a single item within an eUI menu structure. Supports hierarchical navigation with expandable/collapsible children,
multiple interaction modes (URL navigation, router links, commands, labels), and visual states (collapsed, disabled, selected).
Implements keyboard navigation and accessibility features for menu interactions.

### Basic Usage
```typescript
// Typically used within EuiMenuComponent via items array
item: EuiMenuItem = {
  id: 'home',
  label: 'Home',
  icon: 'eui-home',
  url: '/home'
};
```

### With Children
```typescript
item: EuiMenuItem = {
  id: 'settings',
  label: 'Settings',
  expanded: true,
  children: [
    { id: 'profile', label: 'Profile', url: '/settings/profile' }
  ]
};
```

### Accessibility
- Implements FocusableOption for keyboard navigation
- ARIA attributes for menu item role and state
- Keyboard support for Enter, Space, and Arrow keys
- Focus management for nested menu structures

### Notes
- Automatically managed by parent EuiMenuComponent
- Supports tooltips in collapsed menu mode
- Can display badges, action icons, and external link indicators


**Selector:** `eui-menu-item`

## Inputs
- **hasBoldRootLevel**: `boolean` - Applies bold font weight to root-level menu items (items without a parent).
- **hasCollapsedInitials**: `boolean` - Enables display of initials or abbreviated text when the menu is collapsed.
- **hasExpandIcon**: `boolean` - Controls visibility of the expand/collapse icon for menu items with children.
- **hasIcon**: `boolean` - Indicates whether the menu item displays an icon.
- **hasIconLabel**: `boolean` - Indicates whether the menu item displays an icon with a label in collapsed mode.
- **hasTooltip**: `boolean` - Enables tooltip display when the menu is in collapsed state.
- **hasTooltipOnExpanded**: `boolean` - Enables tooltip display when the menu is in expanded state.
- **isCollapsed**: `boolean` - Indicates whether the parent menu is in collapsed state.
- **item**: `EuiMenuItem` - The menu item data model containing label, icon, navigation properties, children, and state flags. Required. Defines all visual and behavioral aspects of the menu item.
- **parent**: `EuiMenuItem` - Reference to the parent menu item when this item is nested within a hierarchical menu structure. Optional. Used to determine styling and behavior based on menu depth.

## Outputs
- **expandToggle**: `EventEmitter` - Emitted when the user toggles the expanded/collapsed state of a menu item with children. Payload: The EuiMenuItem that was toggled. Triggered by clicking the expand icon or pressing Enter/Space on it.
- **itemClick**: `EventEmitter` - Emitted when the user clicks or activates the menu item. Payload: The EuiMenuItem that was clicked. Triggered by mouse click or keyboard activation (Enter/Space).