eui documentation
  1. Components
  2. EuiMenuComponent

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
Methods
Inputs
Outputs
HostBindings
HostListeners
Accessors

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
getcssClasses()

results matching ""

    No results matching ""