### File

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

### Description

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.

### Basic Usage

Example :

    // Typically used within EuiMenuComponent via items array
    item: EuiMenuItem = {
      id: 'home',
      label: 'Home',
      icon: 'eui-home',
      url: '/home'
    };

### With Children

Example :

    item: EuiMenuItem = {
      id: 'settings',
      label: 'Settings',
      expanded: true,
      children: [
        { id: 'profile', label: 'Profile', url: '/settings/profile' }
      ]
    };

### Accessibility

- Implements FocusableOption for keyboard navigation
- ARIA attributes for menu item role and state
- Keyboard support for Enter, Space, and Arrow keys
- Focus management for nested menu structures

### Notes

- Automatically managed by parent EuiMenuComponent
- Supports tooltips in collapsed menu mode
- Can display badges, action icons, and external link indicators

### Implements

`OnInit` `OnChanges` `FocusableOption`

### Metadata

encapsulation | `ViewEncapsulation.None`
selector | `eui-menu-item`
imports | `RouterLink` `RouterLinkActive` `NgTemplateOutlet` `TranslateModule` `EUI_ICON` `EUI_BADGE` `EUI_ICON_BUTTON` `EUI_BUTTON` `EuiTooltipDirective`
styleUrls | `./styles/_index.scss`
templateUrl | `./eui-menu-item.component.html`

### Index

###### Properties

- ariaLabel
- collapseMenuLabel
- elementRef
- expandMenuLabel
- isLabelItem
- isLinkItem
- isUrlItem
- role
- tabindex

###### Methods

- elementIsVisibleInViewport
- Public focus
- Public focusActionIcon
- Public isActionIconFocused
- Public onActionIconClick
- Public onActionIconKeyDown
- Public onClick
- Public onExpandToggle
- scrollIntoView
- Public stopPropagation

###### Inputs

- hasBoldRootLevel
- hasCollapsedInitials
- hasExpandIcon
- hasIcon
- hasIconLabel
- hasTooltip
- hasTooltipOnExpanded
- hasTooltipOnlyOnExpanded
- isCollapsed
- item
- parent

###### Outputs

- expandToggle
- itemClick

###### HostBindings

- attr.aria-disabled
- attr.aria-expanded
- attr.aria-haspopup
- attr.aria-label
- attr.role
- attr.tabindex
- class

###### HostListeners

- click

###### Accessors

- cssClasses
- ariaHasPopup
- ariaExpanded
- ariaDisabled
- menuItemTooltip

### Inputs

hasBoldRootLevel
Type : `boolean`
Default value : `false`
Applies bold font weight to root-level menu items (items without a parent).

hasCollapsedInitials
Type : `boolean`
Default value : `false`
Enables display of initials or abbreviated text when the menu is collapsed.

hasExpandIcon
Type : `boolean`
Default value : `true`
Controls visibility of the expand/collapse icon for menu items with children.

hasIcon
Type : `boolean`
Default value : `false`
Indicates whether the menu item displays an icon.

hasIconLabel
Type : `boolean`
Default value : `false`
Indicates whether the menu item displays an icon with a label in collapsed mode.

hasTooltip
Type : `boolean`
Default value : `false`
Enables tooltip display when the menu is in collapsed state.

hasTooltipOnExpanded
Type : `boolean`
Default value : `false`
Enables tooltip display when the menu is in expanded state.

hasTooltipOnlyOnExpanded
Type : `boolean`
Default value : `false`
Determines if the tooltip has to be genererated from tooltip property when hasTooltipOnExpanded from the menu item label and when expanded only

isCollapsed
Type : `boolean`
Default value : `false`
Indicates whether the parent menu is in collapsed state.

item
Type : `EuiMenuItem`
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.

parent
Type : `EuiMenuItem`
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.

### Outputs

expandToggle
Type : `EventEmitter`
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.

itemClick
Type : `EventEmitter`
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).

### HostBindings

attr.aria-disabled
Type : `boolean`

attr.aria-expanded
Type : `boolean`

attr.aria-haspopup
Type : `boolean`

attr.aria-label
Type : `string`
Default value : `''`

attr.role
Type : `string`
Default value : `'menuitem'`

attr.tabindex
Type : `string`
Default value : `'-1'`

class
Type : `string`

### HostListeners

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

### Methods

elementIsVisibleInViewport
`elementIsVisibleInViewport(partiallyVisible: unknown)`

Check if an element is visible in the viewport

Parameters :

Name | Type | Optional | Default value
partiallyVisible | `unknown` | No | `false`

Returns : `boolean`

Public focus
`focus()`
Returns : `void`

Public focusActionIcon
`focusActionIcon()`
Returns : `void`

Public isActionIconFocused
`isActionIconFocused()`
Returns : `boolean`

Public onActionIconClick
`onActionIconClick(event: MouseEvent)`

Parameters :

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

Returns : `void`

Public onActionIconKeyDown
`onActionIconKeyDown(event: KeyboardEvent)`

Parameters :

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

Returns : `void`

Public onClick
`onClick(event: MouseEvent | KeyboardEvent)`

Parameters :

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

Returns : `void`

Public onExpandToggle
`onExpandToggle(event: Event)`

Parameters :

Name | Type | Optional
event | `Event` | No

Returns : `void`

scrollIntoView
`scrollIntoView(properties: unknown)`

Scroll the element into view

Parameters :

Name | Type | Optional
properties | `unknown` | No

Returns : `void`

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

Parameters :

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

Returns : `void`

### Properties

ariaLabel
Type : `string`
Default value : `''`
Decorators : `@HostBinding('attr.aria-label')`

collapseMenuLabel
Type : `string`
Default value : `'Collapse'`

elementRef
Type : `unknown`
Default value : `inject(ElementRef)`

expandMenuLabel
Type : `string`
Default value : `'Expand'`

isLabelItem
Type : `unknown`
Default value : `false`

isLinkItem
Type : `unknown`
Default value : `false`

isUrlItem
Type : `unknown`
Default value : `false`

role
Type : `string`
Default value : `'menuitem'`
Decorators : `@HostBinding('attr.role')`

tabindex
Type : `string`
Default value : `'-1'`
Decorators : `@HostBinding('attr.tabindex')`

### Accessors

cssClasses
get `cssClasses()`

ariaHasPopup
get `ariaHasPopup()`

ariaExpanded
get `ariaExpanded()`

ariaDisabled
get `ariaDisabled()`

menuItemTooltip
get `menuItemTooltip()`

# results matching ""

# No results matching ""