### File

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

### Description

The horizontal menu is used as a primary navigation and it can display up to 2 levels. It directs users to the pages where they need to visit.

### Extends

`ECLBaseDirective`

### Implements

`OnInit` `AfterContentInit` `OnDestroy`

### Metadata

selector | `ecl-menu`
imports | `TranslateModule` `EUI_ECL_BUTTON` `EUI_ECL_ICON`
styles | `:host { display: block; }`
templateUrl | `./ecl-menu.component.html`

### Index

###### Properties
Public breakpointsValue btnNext btnPrevious eclRootMenuItems hasOverflow innerSection innerStyleTop isHamburgerMenuOpened isMenuHidden isMobileBreakpoint isPrevBtnCurrentClass isShowNextBtn isShowPrevBtn isTablet itemsList menuListStyleLeft menuListStyleRight openCloseButton overlayStyleTop role
###### Methods
onDocumentClick onEscapePress onMenuBackClick onMenuCloseClick onMenuOpenCloseClick onNextBtnClick onPrevBtnClick onSwipeLeft onSwipeRight positionMenuOverlay getCssClasses
###### Inputs
maxLines class e2eAttr tabindex
###### Outputs
menuItemSelect openHamburgerMenu
###### HostBindings
attr.data-expanded attr.role class class.ecl-menu--forced-close class.ecl-menu--forced-mobile
###### HostListeners
document:click keydown.escape
###### Accessors
cssClasses expandedAttr isMenuExpandedInMobile

### Constructor

`constructor()`

### Inputs

maxLines
Type : `number`
Default value : `0`
Adds some additional styling for the menu items' labels. Depending on that value, the labels can drop on 2-3 lines, if they are longer.

class
Type : `string`

e2eAttr
Type : `any`

tabindex
Type : `number`

### Outputs

menuItemSelect
Type : `EventEmitter`

openHamburgerMenu
Type : `EventEmitter`

### HostBindings

attr.data-expanded
Type : `string`

attr.role
Type : `string`
Default value : `'navigation'`
The default role is 'navigation', should not be changed.

class
Type : `string`

class.ecl-menu--forced-close
Type : `boolean`
Default value : `false`

class.ecl-menu--forced-mobile
Type : `boolean`
Default value : `false`

### HostListeners

document:click
Arguments : `'$event'`
`document:click(event: MouseEvent)`
On outside click - close/hide any open menus. Parameters :
Name | Optional
event | No

keydown.escape
Arguments : `'$event'`
`keydown.escape(event: Event)`
On 'esc' key clicked - close/hide any open menus. Parameters :
Name | Optional
event | No

### Methods

onDocumentClick
`onDocumentClick(event: MouseEvent)`
Decorators : `@HostListener('document:click', ['$event'])`
On outside click - close/hide any open menus. Parameters :
Name | Type | Optional
event | `MouseEvent` | No
Returns : `void`

onEscapePress
`onEscapePress(event: Event)`
Decorators : `@HostListener('keydown.escape', ['$event'])`
On 'esc' key clicked - close/hide any open menus. Parameters :
Name | Type | Optional
event | `Event` | No
Returns : `void`

onMenuBackClick
`onMenuBackClick(evt: MouseEvent)`
Manages state on back button click, used in mobile view. Parameters :
Name | Type | Optional
evt | `MouseEvent` | No
Returns : `void`

onMenuCloseClick
`onMenuCloseClick(evt: MouseEvent)`
Manages state on close button click, used in mobile view, in EU theme. Parameters :
Name | Type | Optional
evt | `MouseEvent` | No
Returns : `void`

onMenuOpenCloseClick
`onMenuOpenCloseClick(evt: MouseEvent)`
Manages state on open/close button click, used in mobile view. Parameters :
Name | Type | Optional
evt | `MouseEvent` | No
Returns : `void`

onNextBtnClick
`onNextBtnClick()`
Manages state on 'next' button click. Used in desktop view. Slides the items and shows the next hidden items. Returns : `void`

onPrevBtnClick
`onPrevBtnClick()`
Manages state on 'previous' button click. Used in desktop view. Slides the items and shows the previous hidden items. Returns : `void`

onSwipeLeft
`onSwipeLeft()`
Swipe left gesture handling Returns : `void`

onSwipeRight
`onSwipeRight()`
Swipe right gesture handling Returns : `void`

positionMenuOverlay
`positionMenuOverlay(bottomSpaceY: number)`
Postions overlay, depending on parent header position. This method is called from parent header, which uses the menu for navigation. Parameters :
Name | Type | Optional
bottomSpaceY | `number` | No
Returns : `void`

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

### Properties

Public breakpointsValue
Type : `any`
Default value : `{ isMobile: false, isTablet: false, isLtDesktop: false, isDesktop: false, isXL: false, isXXL: false, }`
Represents the current viewport breakpoint states.

btnNext
Type : `EclButtonComponent`
Decorators : `@ViewChild('btnNext')`
When there is an overflow of the menu, the 'next' button to navigate to next hidden items.

btnPrevious
Type : `EclButtonComponent`
Decorators : `@ViewChild('btnPrevious')`
When there is an overflow of the menu, the 'previous' button to navigate back to first hidden items.

eclRootMenuItems
Type : `QueryList<EclMenuItemComponent>`
Decorators : `@ContentChildren(EclMenuItemComponent)`
The main items of the menu.

hasOverflow
Type : `unknown`
Default value : `false`

innerSection
Type : `ElementRef`
Decorators : `@ViewChild('innerSection')`
The element, that wraps the main menu items and the back and forth button.

innerStyleTop
Type : `number | null`
Default value : `null`

isHamburgerMenuOpened
Type : `unknown`
Default value : `false`

isMenuHidden
Type : `unknown`
Default value : `false`
Decorators : `@HostBinding('class.ecl-menu--forced-close')`

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

isPrevBtnCurrentClass
Type : `unknown`
Default value : `false`
Show/hide the specific class for the 'previous' and 'next' buttons.

isShowNextBtn
Type : `unknown`
Default value : `false`

isShowPrevBtn
Type : `unknown`
Default value : `false`

isTablet
Type : `unknown`
Default value : `false`
Decorators : `@HostBinding('class.ecl-menu--forced-mobile')`

itemsList
Type : `ElementRef`
Decorators : `@ViewChild('itemsList')`
The element that wraps the main menu items.

menuListStyleLeft
Type : `string`
Default value : `'auto'`

menuListStyleRight
Type : `string`
Default value : `'auto'`

openCloseButton
Type : `EclButtonComponent`
Decorators : `@ViewChild('openCloseButton')`
The button to open/close menu in mobile mode.

overlayStyleTop
Type : `number | null`
Default value : `null`

role
Type : `string`
Default value : `'navigation'`
Decorators : `@HostBinding('attr.role')`
The default role is 'navigation', should not be changed.

### Accessors

cssClasses
get `cssClasses()`

expandedAttr
get `expandedAttr()`

isMenuExpandedInMobile
get `isMenuExpandedInMobile()`

# results matching ""

# No results matching ""