### File

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

### Description

This component represents a root menu item. Adds styling and functionality to menu item.

### Extends

`ECLBaseDirective`

### Implements

`EclMenuItem` `AfterContentInit` `OnDestroy`

### Metadata

encapsulation | `ViewEncapsulation.None`
selector | `ecl-menu-item`
imports | `NgTemplateOutlet` `RouterLink` `RouterLinkWithHref` `EUI_ECL_BUTTON` `EUI_ECL_ICON` `EUI_ECL_LINK`
templateUrl | `./ecl-menu-item.component.html`

### Index

###### Properties
el isExpanded isFull isHovered isMobileBreakpoint isVisible menuButton menuLink role submenu
###### Methods
checkMenuItem onButtonKeydown onFocusFromNext onFocusFromPrev onFocusFromSubmenu onItemCaretClick onItemClick onItemFocus onItemMouseEnter onItemMouseLeave onLinkKeydown getCssClasses
###### Inputs
href id isCurrent label linkExtraAttributes queryParams queryParamsHandling routerLink target toggleAriaLabel class e2eAttr tabindex
###### Outputs
menuItemCaret menuItemFocus menuItemHover menuItemHoverOut menuItemKeydown menuItemSelect menuMegaItemSelect menuMegaLastItemTab
###### HostBindings
attr.aria-expanded attr.aria-haspopup attr.role class class.ecl-menu__item--has-children
###### HostListeners
mouseenter mouseleave
###### Accessors
cssClasses hasEclChildrenDataAttribute isAriaExpanded ariaCurrent hasChildren children

### Constructor

`constructor()`

### Inputs

href
Type : `string`
Default value : `''`

id
Type : `string`

isCurrent
Type : `boolean`
Default value : `false`

label
Type : `string`

linkExtraAttributes
Type : `literal type`
Custom attributes, to be added to the tag of the menu item.

queryParams
Type : `Params | null`
Default value : `null`

queryParamsHandling
Type : `QueryParamsHandling`
Default value : `null`

routerLink
Type : `string | any[]`
Default value : `null`

target
Type : `string`
Default value : `''`

toggleAriaLabel
Type : `string`
When in mobile view, use this property to set aria-label for the toggle items button (to expand item's children).

class
Type : `string`

e2eAttr
Type : `any`

tabindex
Type : `number`

### Outputs

menuItemCaret
Type : `EventEmitter`

menuItemFocus
Type : `EventEmitter`

menuItemHover
Type : `EventEmitter`
Event that is emited on clicking the caret button to expand item's children in mobile mode.

menuItemHoverOut
Type : `EventEmitter`

menuItemKeydown
Type : `EventEmitter`

menuItemSelect
Type : `EventEmitter`

menuMegaItemSelect
Type : `EventEmitter`

menuMegaLastItemTab
Type : `EventEmitter`
This event is emited when the keyboard nav reaches the last item in mobile view. Then the next focused element should be the 'close' btn.

### HostBindings

attr.aria-expanded
Type : `boolean`

attr.aria-haspopup
Type : `boolean`

attr.role
Type : `string`
Default value : `'listitem'`
The default role of the item is 'listitem' and should not be changed.

class
Type : `string`

class.ecl-menu__item--has-children
Type : `boolean`

### HostListeners

mouseenter
Arguments : `'$event'`
`mouseenter(evt: MouseEvent)`

mouseleave
Arguments : `'$event'`
`mouseleave(evt: MouseEvent)`

### Methods

checkMenuItem
`checkMenuItem(maxLines: number, isMobileBreakpoint: boolean)`
This method calculates height and width of an item, depending the maximum of lines(rows) allowed. Depends on the 'maxLines' property of the parent menu component. Parameters :
Name | Type | Optional | Description
maxLines | `number` | No | property that sets the maximum possible lines in a menu item.
isMobileBreakpoint | `boolean` | No |
Returns : `void`

onButtonKeydown
`onButtonKeydown(evt: Event)`
Manages the keyboard navigation when the current element is the button of the menu item. Parameters :
Name | Type | Optional
evt | `Event` | No
Returns : `void`

onFocusFromNext
`onFocusFromNext()`
Manages the state when the item is focused, when navigating with keyboard and the navigation is coming from the next root menu item. Returns : `void`

onFocusFromPrev
`onFocusFromPrev()`
Manages the state when the item is focused, when navigating with keyboard and the navigation is coming from the previous root menu item. Returns : `void`

onFocusFromSubmenu
`onFocusFromSubmenu()`
Manages the state when the item is focused, when navigating with keyboard and the navigation is coming from the submenu. Returns : `void`

onItemCaretClick
`onItemCaretClick(evt: MouseEvent)`
When clicking the caret button, to expand item's children. Used in mobile view. Parameters :
Name | Type | Optional
evt | `MouseEvent` | No
Returns : `void`

onItemClick
`onItemClick(evt: Event)`
Parameters :
Name | Type | Optional
evt | `Event` | No
Returns : `void`

onItemFocus
`onItemFocus(evt: FocusEvent)`
Parameters :
Name | Type | Optional
evt | `FocusEvent` | No
Returns : `void`

onItemMouseEnter
`onItemMouseEnter(evt: MouseEvent)`
Decorators : `@HostListener('mouseenter', ['$event'])`
Parameters :
Name | Type | Optional
evt | `MouseEvent` | No
Returns : `void`

onItemMouseLeave
`onItemMouseLeave(evt: MouseEvent)`
Decorators : `@HostListener('mouseleave', ['$event'])`
Parameters :
Name | Type | Optional
evt | `MouseEvent` | No
Returns : `void`

onLinkKeydown
`onLinkKeydown(evt: Event)`
Manages the keyboard navigation when the current element is the tag of the menu item. Parameters :
Name | Type | Optional
evt | `Event` | No
Returns : `void`

getCssClasses
`getCssClasses(rootClass: string)`
Parameters :
Name | Type | Optional
rootClass | `string` | No
Returns : `string`

### Properties

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

isExpanded
Type : `boolean`

isFull
Type : `unknown`
Default value : `false`
Set to 'true', when item has more than 13 chidren and the overlay needs to use the full available space.

isHovered
Type : `unknown`
Default value : `false`

isMobileBreakpoint
Type : `unknown`
Default value : `false`

isVisible
Type : `unknown`
Default value : `true`
Used when menu has overlay, to show if the item is currently displayed.

menuButton
Type : `EclButtonComponent`
Decorators : `@ViewChild(EclButtonComponent)`
The

menuLink
Type : `ElementRef<HTMLAnchorElement>`
Decorators : `@ViewChild('menuLink')`
The element of the menu item, when there are no children.

role
Type : `string`
Default value : `'listitem'`
Decorators : `@HostBinding('attr.role')`
The default role of the item is 'listitem' and should not be changed.

submenu
Type : `EclMenuMegaComponent`
Decorators : `@ContentChild(undefined)`

### Accessors

cssClasses
get `cssClasses()`

hasEclChildrenDataAttribute
get `hasEclChildrenDataAttribute()`

isAriaExpanded
get `isAriaExpanded()`

ariaCurrent
get `ariaCurrent()`

hasChildren
get `hasChildren()`

children
get `children()`

# results matching ""

# No results matching ""