### File

`packages/components/eui-menu/eui-menu.component.ts`

### Description

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

Example :

    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' }
      ]}
    ];

Example :

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

### With Filter

Example :

    <eui-menu [items]="menuItems" [hasFilter]="true" searchFilterLabel="Search menu"></eui-menu>

### Collapsed Mode

Example :

    <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

### Implements

`OnInit` `OnChanges` `OnDestroy` `AfterViewInit`

### Metadata

encapsulation | `ViewEncapsulation.None`
selector | `eui-menu`
imports | `NgTemplateOutlet` `EuiMenuItemComponent` `EUI_ICON` `EUI_ICON_INPUT` `EUI_INPUT_TEXT`
styleUrls | `./styles/_index.scss`
templateUrl | `./eui-menu.component.html`

### Index

###### Properties

- menubar

###### Methods

- onKeydown
- stopPropagation

###### Inputs

- expandAllItems
- externalLinkLabel
- filterValue
- fragmentId
- hasBoldRootLevel
- hasCollapsedInitials
- hasFilter
- hasIcons
- hasIconsLabels
- hasScrollToItem
- hasTooltip
- hasTooltipOnExpanded
- isCollapsed
- isFlat
- items
- searchFilterLabel

###### Outputs

- expandToggle
- isClick
- itemClick

###### HostBindings

- class

###### HostListeners

- click

###### Accessors

- cssClasses

### Inputs

expandAllItems
Type : `boolean`
Default value : `false`
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
Type : `string`
Accessible label for external link indicators.

filterValue
Type : `string`
Default value : `''`
Current filter value for programmatic filtering of menu items. Defaults to empty string.

fragmentId
Type : `string`
URL fragment identifier to append when navigating to internal routes.

hasBoldRootLevel
Type : `boolean`
Default value : `false`
Applies bold font weight to root-level menu items. Defaults to false.

hasCollapsedInitials
Type : `boolean`
Default value : `false`
Displays item initials when menu is collapsed instead of icons. Defaults to false.

hasFilter
Type : `boolean`
Default value : `false`
Enables the search filter input for filtering menu items by label. Defaults to false.

hasIcons
Type : `boolean`
Default value : `false`
Displays icons for menu items when provided in item configuration. Defaults to false.

hasIconsLabels
Type : `boolean`
Default value : `false`
Shows labels alongside icons in the menu. Defaults to false.

hasScrollToItem
Type : `boolean`
Default value : `false`
Automatically scrolls to the active menu item matching the current route on navigation. Defaults to false.

hasTooltip
Type : `boolean`
Default value : `true`
Enables tooltips on menu items when collapsed. Defaults to true.

hasTooltipOnExpanded
Type : `boolean`
Default value : `false`
Shows tooltips even when menu is expanded. Defaults to false.

isCollapsed
Type : `boolean`
Default value : `false`
Collapses the menu to a compact state showing only icons or initials. Defaults to false.

isFlat
Type : `boolean`
Default value : `false`
Applies flat styling without hierarchical indentation. Defaults to false.

items
Type : `EuiMenuItem[]`
Hierarchical array of menu items to display. Each item can contain children for nested menus. Required.

searchFilterLabel
Type : `string`
Accessible label for the search filter input field. Defaults to 'Search filter' if not provided.

### Outputs

expandToggle
Type : `EventEmitter`
Emits the menu item when its expanded state is toggled. Only triggered for items with children.

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

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

### HostBindings

class
Type : `string`

### HostListeners

click
Arguments : `'$event'`
`click(event: MouseEvent)`

### Methods

onKeydown
`onKeydown(event: KeyboardEvent)`

Parameters :

Name | Type | Optional
event | `KeyboardEvent` | No

Returns : `void`

stopPropagation
`stopPropagation(event: MouseEvent)`
Decorators : `@HostListener('click', ['$event'])`

Parameters :

Name | Type | Optional
event | `MouseEvent` | No

Returns : `void`

### Properties

menubar
Type : `ElementRef<HTMLUListElement>`
Decorators : `@ViewChild('menubar', {read: ElementRef})`

### Accessors

cssClasses
get `cssClasses()`

# results matching ""

# No results matching ""