# EuiMenuComponent

**Type:** component

<p>Navigation menu component supporting hierarchical item structures with expand/collapse functionality,
keyboard navigation, filtering, and router integration. Provides both collapsed and expanded states
with optional icons, tooltips, and scroll-to-active-item behavior. Commonly used for application
sidebars, navigation panels, and hierarchical content navigation.</p>
<h3>Basic Usage</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-typescript">menuItems: EuiMenuItem[] = [
  { id: &#39;1&#39;, label: &#39;Dashboard&#39;, url: &#39;/dashboard&#39;, icon: &#39;eui-home&#39; },
  { id: &#39;2&#39;, label: &#39;Settings&#39;, children: [
    { id: &#39;2-1&#39;, label: &#39;Profile&#39;, url: &#39;/settings/profile&#39; },
    { id: &#39;2-2&#39;, label: &#39;Security&#39;, url: &#39;/settings/security&#39; }
  ]}
];</code></pre></div><b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-menu [items]=&quot;menuItems&quot; [hasIcons]=&quot;true&quot;&gt;&lt;/eui-menu&gt;</code></pre></div><h3>With Filter</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-menu [items]=&quot;menuItems&quot; [hasFilter]=&quot;true&quot; searchFilterLabel=&quot;Search menu&quot;&gt;&lt;/eui-menu&gt;</code></pre></div><h3>Collapsed Mode</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-menu [items]=&quot;menuItems&quot; [isCollapsed]=&quot;true&quot; [hasTooltip]=&quot;true&quot;&gt;&lt;/eui-menu&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Full keyboard navigation with Arrow keys, Enter, and Space</li>
<li>ARIA roles and properties for menu structure</li>
<li>Focus management for nested items</li>
<li>Screen reader announcements for expand/collapse states</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Supports URL navigation, router links, and command callbacks</li>
<li>Automatically expands to active route when <code>hasScrollToItem</code> is enabled</li>
<li>Filter functionality searches through all menu levels</li>
<li>Collapsed mode shows icons or initials with tooltips</li>
</ul>


**Selector:** `eui-menu`

**Standalone:** false

## Inputs

- **expandAllItems**: `boolean` - <p>Expands all menu items that do not have an explicit expanded property set. Items with
expanded: true or expanded: false are not affected. Defaults to false.</p>

- **externalLinkLabel**: `string` - <p>Accessible label for external link indicators.</p>

- **filterValue**: `string` - <p>Current filter value for programmatic filtering of menu items. Defaults to empty string.</p>

- **fragmentId**: `string` - <p>URL fragment identifier to append when navigating to internal routes.</p>

- **hasBoldRootLevel**: `boolean` - <p>Applies bold font weight to root-level menu items. Defaults to false.</p>

- **hasCollapsedInitials**: `boolean` - <p>Displays item initials when menu is collapsed instead of icons. Defaults to false.</p>

- **hasFilter**: `boolean` - <p>Enables the search filter input for filtering menu items by label. Defaults to false.</p>

- **hasIcons**: `boolean` - <p>Displays icons for menu items when provided in item configuration. Defaults to false.</p>

- **hasIconsLabels**: `boolean` - <p>Shows labels alongside icons in the menu. Defaults to false.</p>

- **hasScrollToItem**: `boolean` - <p>Automatically scrolls to the active menu item matching the current route on navigation.
Defaults to false.</p>

- **hasTooltip**: `boolean` - <p>Enables tooltips on menu items when collapsed. Defaults to true.</p>

- **hasTooltipOnExpanded**: `boolean` - <p>Shows tooltips even when menu is expanded. Defaults to false.</p>

- **isCollapsed**: `boolean` - <p>Collapses the menu to a compact state showing only icons or initials. Defaults to false.</p>

- **isFlat**: `boolean` - <p>Applies flat styling without hierarchical indentation. Defaults to false.</p>

- **items**: `EuiMenuItem[]` - <p>Hierarchical array of menu items to display. Each item can contain children for nested menus.
Required.</p>

- **searchFilterLabel**: `string` - <p>Accessible label for the search filter input field. Defaults to &#39;Search filter&#39; if not provided.</p>


## Outputs

- **expandToggle**: `EventEmitter` - <p>Emits the menu item when its expanded state is toggled. Only triggered for items with children.</p>

- **isClick**: `EventEmitter<boolean>` - <p>Emits true when any menu item is clicked, regardless of item type or state.</p>

- **itemClick**: `EventEmitter<EuiMenuItem>` - <p>Emits the clicked menu item. Triggered on all item clicks including disabled items.</p>

