# EuiMenuComponent

**Type:** component



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.

### Basic Usage
```typescript
menuItems: EuiMenuItem[] = [
  { id: '1', label: 'Dashboard', url: '/dashboard', icon: 'eui-home' },
  { id: '2', label: 'Settings', children: [
    { id: '2-1', label: 'Profile', url: '/settings/profile' },
    { id: '2-2', label: 'Security', url: '/settings/security' }
  ]}
];
```

```html
<eui-menu [items]="menuItems" [hasIcons]="true"></eui-menu>
```

### With Filter
```html
<eui-menu [items]="menuItems" [hasFilter]="true" searchFilterLabel="Search menu"></eui-menu>
```

### Collapsed Mode
```html
<eui-menu [items]="menuItems" [isCollapsed]="true" [hasTooltip]="true"></eui-menu>
```

### Accessibility
- Full keyboard navigation with Arrow keys, Enter, and Space
- ARIA roles and properties for menu structure
- Focus management for nested items
- Screen reader announcements for expand/collapse states

### Notes
- Supports URL navigation, router links, and command callbacks
- Automatically expands to active route when `hasScrollToItem` is enabled
- Filter functionality searches through all menu levels
- Collapsed mode shows icons or initials with tooltips


**Selector:** `eui-menu`

## Inputs
- **expandAllItems**: `boolean` - 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.
- **externalLinkLabel**: `string` - Accessible label for external link indicators.
- **filterValue**: `string` - Current filter value for programmatic filtering of menu items. Defaults to empty string.
- **fragmentId**: `string` - URL fragment identifier to append when navigating to internal routes.
- **hasBoldRootLevel**: `boolean` - Applies bold font weight to root-level menu items. Defaults to false.
- **hasCollapsedInitials**: `boolean` - Displays item initials when menu is collapsed instead of icons. Defaults to false.
- **hasFilter**: `boolean` - Enables the search filter input for filtering menu items by label. Defaults to false.
- **hasIcons**: `boolean` - Displays icons for menu items when provided in item configuration. Defaults to false.
- **hasIconsLabels**: `boolean` - Shows labels alongside icons in the menu. Defaults to false.
- **hasScrollToItem**: `boolean` - Automatically scrolls to the active menu item matching the current route on navigation. Defaults to false.
- **hasTooltip**: `boolean` - Enables tooltips on menu items when collapsed. Defaults to true.
- **hasTooltipOnExpanded**: `boolean` - Shows tooltips even when menu is expanded. Defaults to false.
- **isCollapsed**: `boolean` - Collapses the menu to a compact state showing only icons or initials. Defaults to false.
- **isFlat**: `boolean` - Applies flat styling without hierarchical indentation. Defaults to false.
- **items**: `EuiMenuItem[]` - Hierarchical array of menu items to display. Each item can contain children for nested menus. Required.
- **searchFilterLabel**: `string` - Accessible label for the search filter input field. Defaults to 'Search filter' if not provided.

## Outputs
- **expandToggle**: `EventEmitter` - Emits the menu item when its expanded state is toggled. Only triggered for items with children.
- **isClick**: `EventEmitter<boolean>` - Emits true when any menu item is clicked, regardless of item type or state.
- **itemClick**: `EventEmitter<EuiMenuItem>` - Emits the clicked menu item. Triggered on all item clicks including disabled items.