# EuiMenuItemComponent

**Type:** component

<p>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.</p>
<h3>Basic Usage</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-typescript">// Typically used within EuiMenuComponent via items array
item: EuiMenuItem = {
  id: &#39;home&#39;,
  label: &#39;Home&#39;,
  icon: &#39;eui-home&#39;,
  url: &#39;/home&#39;
};</code></pre></div><h3>With Children</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-typescript">item: EuiMenuItem = {
  id: &#39;settings&#39;,
  label: &#39;Settings&#39;,
  expanded: true,
  children: [
    { id: &#39;profile&#39;, label: &#39;Profile&#39;, url: &#39;/settings/profile&#39; }
  ]
};</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Implements FocusableOption for keyboard navigation</li>
<li>ARIA attributes for menu item role and state</li>
<li>Keyboard support for Enter, Space, and Arrow keys</li>
<li>Focus management for nested menu structures</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Automatically managed by parent EuiMenuComponent</li>
<li>Supports tooltips in collapsed menu mode</li>
<li>Can display badges, action icons, and external link indicators</li>
</ul>


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

**Standalone:** false

## Inputs

- **hasBoldRootLevel**: `boolean` - <p>Applies bold font weight to root-level menu items (items without a parent).</p>

- **hasCollapsedInitials**: `boolean` - <p>Enables display of initials or abbreviated text when the menu is collapsed.</p>

- **hasExpandIcon**: `boolean` - <p>Controls visibility of the expand/collapse icon for menu items with children.</p>

- **hasIcon**: `boolean` - <p>Indicates whether the menu item displays an icon.</p>

- **hasIconLabel**: `boolean` - <p>Indicates whether the menu item displays an icon with a label in collapsed mode.</p>

- **hasTooltip**: `boolean` - <p>Enables tooltip display when the menu is in collapsed state.</p>

- **hasTooltipOnExpanded**: `boolean` - <p>Enables tooltip display when the menu is in expanded state.</p>

- **isCollapsed**: `boolean` - <p>Indicates whether the parent menu is in collapsed state.</p>

- **item**: `EuiMenuItem` - <p>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.</p>

- **parent**: `EuiMenuItem` - <p>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.</p>


## Outputs

- **expandToggle**: `EventEmitter` - <p>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.</p>

- **itemClick**: `EventEmitter` - <p>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).</p>

