Info

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

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

getcssClasses()

ariaHasPopup

getariaHasPopup()

ariaExpanded

getariaExpanded()

ariaDisabled

getariaDisabled()

menuItemTooltip

getmenuItemTooltip()

File

Description

Basic Usage

With Children

Accessibility

Notes

Implements

Metadata

Index

Properties

Methods

Inputs

Outputs

HostBindings

HostListeners

Accessors

Inputs

Outputs

HostBindings

HostListeners

Methods

Properties

Accessors

results matching ""

No results matching ""