packages/ecl/components/ecl-mega-menu/ecl-mega-menu.component.ts
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.
| HostDirectives |
ECLBaseDirective
ECLClickOutsideDirective
Outputs : eclClickOutside
|
| selector | nav[eclMegaMenu] |
| imports |
TranslateModule
EUI_ECL_BUTTON
EUI_ECL_ICON
|
| templateUrl | ./ecl-mega-menu.component.html |
Properties |
Methods |
Inputs |
Outputs |
HostBindings |
HostListeners |
Accessors |
constructor()
|
| class |
Type : string
|
| e2eAttr |
Type : any
|
| tabindex |
Type : number
|
| megaMenuItemSelect |
Type : EventEmitter
|
|
The event that is emitted, when a menu item is selected. |
| attr.data-expanded |
Type : string
|
| attr.role |
Type : string
|
Default value : 'navigation'
|
|
The 'role' attribute of the component is set to 'navigation'. should not be changed. |
| class |
Type : string
|
| eclClickOutside |
eclClickOutside()
|
|
When clicking outside the menu - close any expanded item. |
| 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: unknown)
|
||||||
|
Parameters :
Returns :
void
|
| getCssClasses | ||||||
getCssClasses(rootClass: string)
|
||||||
|
Parameters :
Returns :
string
|
| Public breakpointsValue |
Type : any
|
Default value : {
isMobile: false,
isTablet: false,
isLtDesktop: false,
isDesktop: false,
isXL: false,
isXXL: false,
}
|
|
Represents the current viewport breakpoint states. |
| hasSecondaryFeatured |
Type : unknown
|
Default value : false
|
|
Adds the relative class to the component, when a submenu is opened and this submenu has a featured component child |
| innerStyleTop |
Type : number
|
| isExpanded |
Type : unknown
|
Default value : false
|
| isMobileBreakpoint |
Type : unknown
|
Default value : false
|
|
If the menu is in mobile mode. |
| isMobileExpanded |
Type : unknown
|
Default value : false
|
|
If the menu is expanded in mobile mode. |
| isOnePanel |
Type : unknown
|
Default value : false
|
|
When a menu item is expanded and has only one panel (one sub-level). |
| isOpenMobile |
Type : unknown
|
Default value : false
|
|
If the menu is open, when in mobile mode. |
| isStartPanel |
Type : unknown
|
Default value : false
|
|
Used in mobile mode - when the start panel is open (i.e. the hamburger button is clicked). |
| isTwoPanels |
Type : unknown
|
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. |
| cssClasses |
getcssClasses()
|
| expandedAttr |
getexpandedAttr()
|