### 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 expandMenuLabel isActionIconFocused isLabelItem isLinkItem isUrlItem role tabindex
###### Methods
elementIsVisibleInViewport Public focus Public focusActionIcon Public onActionIconClick onActionIconFocusOut Public onActionIconKeyDown Public onClick Public onExpandToggle scrollIntoView Public stopPropagation
###### Inputs
hasBoldRootLevel hasCollapsedInitials hasExpandIcon hasIcon hasIconLabel hasTooltip hasTooltipOnExpanded 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`
Applies bold font weight to root-level menu items (items without a parent).

hasCollapsedInitials
Type : `boolean`
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`
Indicates whether the menu item displays an icon.

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

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

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

isCollapsed
Type : `boolean`
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 onActionIconClick
`onActionIconClick(event: MouseEvent)`
Parameters :
Name | Type | Optional
event | `MouseEvent` | No
Returns : `void`

onActionIconFocusOut
`onActionIconFocusOut()`
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'`

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

isActionIconFocused
Type : `unknown`
Default value : `false`

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 ""