### File

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

### Description

The 'eclMegaMenu' is an advanced navigation component designed for complex sites with deep hierarchies. It can provide descriptive text for first level items, accommodate up to three levels of navigation, and additionally allows a featured column that can be used to either promote parent-page specific or site-wide pages, hidden deep into the lower levels of the hierarchy.

### Extends

`ECLBaseDirective`

### Implements

`DoCheck` `OnDestroy`

### Metadata

HostDirectives | `ECLBaseDirective` `ECLClickOutsideDirective` Outputs : eclClickOutside
selector | `nav[eclMegaMenu]`
imports | `TranslateModule` `EUI_ECL_BUTTON` `EUI_ECL_ICON`
templateUrl | `./ecl-mega-menu.component.html`

### Index

###### Properties
innerStyleTop isExpanded isMobileBreakpoint isMobileExpanded isOnePanel isOpenMobile isStartPanel isTwoPanels menuItems overlayStyleTop role
###### Methods
onClickOutsideMegaMenu onMegaMenuBack onMegaMenuMobileClose onMegaMenuMobileOpen positionMenuOverlay getCssClasses
###### Inputs
class e2eAttr tabindex
###### Outputs
megaMenuItemSelect
###### HostBindings
attr.aria-expanded attr.role class
###### HostListeners
eclClickOutside
###### Accessors
cssClasses

### Constructor

`constructor(differs: IterableDiffers, cdkBreakpointObserver: BreakpointObserver, eclRtlService: EclRtlService, eclUserDeviceService: EclUserDeviceService, eclHeaderMenuComunicationService: EclHeaderMenuComunicationService, eclMegaMenuDataService: EclMegaMenuDataService, el: ElementRef, renderer: Renderer2)`
Parameters :
Name | Type | Optional
differs | `IterableDiffers` | No
cdkBreakpointObserver | `BreakpointObserver` | No
eclRtlService | `EclRtlService` | No
eclUserDeviceService | `EclUserDeviceService` | No
eclHeaderMenuComunicationService | `EclHeaderMenuComunicationService` | No
eclMegaMenuDataService | `EclMegaMenuDataService` | No
el | `ElementRef` | No
renderer | `Renderer2` | No

### Inputs

class
Type : `string`

e2eAttr
Type : `any`

tabindex
Type : `number`

### Outputs

megaMenuItemSelect
Type : `EventEmitter`
The event that is emitted, when a menu item is selected.

### HostBindings

attr.aria-expanded
Type : `boolean`
Default value : `false`

attr.role
Type : `string`
Default value : `'navigation'`
The 'role' attribute of the component is set to 'navigation'. should not be changed.

class
Type : `string`

### HostListeners

eclClickOutside
`eclClickOutside()`
When clicking outside the menu - close any expanded item.

### Methods

onClickOutsideMegaMenu
`onClickOutsideMegaMenu()`
Decorators : `@HostListener('eclClickOutside')`
When clicking outside the menu - close any expanded item. Returns : `void`

onMegaMenuBack
`onMegaMenuBack()`
Used for mobile menu - when user clicks on 'Back' button. Returns to the previous state. Returns : `void`

onMegaMenuMobileClose
`onMegaMenuMobileClose()`
Returns : `void`

onMegaMenuMobileOpen
`onMegaMenuMobileOpen()`
Returns : `void`

positionMenuOverlay
`positionMenuOverlay(parentHeaderBottomSpaceY)`
Parameters :
Name | Optional
parentHeaderBottomSpaceY | No
Returns : `void`

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

### Properties

innerStyleTop
Type : `number`

isExpanded
Default value : `false`
Decorators : `@HostBinding('attr.aria-expanded')`

isMobileBreakpoint
Default value : `false`
If the menu is in mobile mode.

isMobileExpanded
Default value : `false`
If the menu is expanded in mobile mode.

isOnePanel
Default value : `false`
When a menu item is expanded and has only one panel (one sub-level).

isOpenMobile
Default value : `false`
If the menu is open, when in mobile mode.

isStartPanel
Default value : `false`
Used in mobile mode - when the start panel is open (i.e. the hamburger button is clicked).

isTwoPanels
Default value : `false`
If a menu item is expanded and has two panels/levels displayed.

menuItems
Type : `QueryList<EclMegaMenuItemComponent>`
Decorators : `@ContentChildren(undefined, {descendants: true})`

overlayStyleTop
Type : `number`
Used to position the overlay, when a menu item is expanded.

role
Type : `string`
Default value : `'navigation'`
Decorators : `@HostBinding('attr.role')`
The 'role' attribute of the component is set to 'navigation'. should not be changed.

### Accessors

cssClasses
get `cssClasses()`

# results matching ""

# No results matching ""