### File

`packages/components/layout/eui-toolbar/toolbar-mega-menu/toolbar-mega-menu.component.ts`

### Description

Mega menu component for toolbar providing a multi-column dropdown navigation with grouped menu items. Displays a horizontal menu bar with expandable dropdown panels containing organized navigation links. Automatically groups child menu items by column index and label for structured multi-column layout. Integrates with Angular CDK Overlay for positioning and manages outside click/escape key dismissal. Synchronizes menu items with EuiAppShellService state for global access and reactive updates. Supports badges, icons, and custom commands on menu items with router link integration.

Example :

    <eui-app>
      <eui-app-toolbar>
        <eui-toolbar>
          <eui-toolbar-mega-menu [items]="menuItems"></eui-toolbar-mega-menu>
        </eui-toolbar>
      </eui-app-toolbar>
    </eui-app>

Example :

    menuItems: EuiMenuItem[] = [
      {
        label: 'Products',
        children: [
          { label: 'Item 1', url: '/products/1', megaMenuColIndex: 0, megaMenuColLabel: 'Category A' },
          { label: 'Item 2', url: '/products/2', megaMenuColIndex: 1, megaMenuColLabel: 'Category B' }
        ]
      }
    ];

### Accessibility

- Navigation role for semantic structure
- Keyboard accessible (Escape to close)
- Router link integration for navigation
- Outside click dismissal
- Focus management for dropdown
- ARIA attributes for menu structure

### Notes

- Must be used within eui-toolbar for proper layout
- Positioned at start of toolbar (leftmost)
- Items array uses EuiMenuItem interface
- Children grouped by megaMenuColIndex and megaMenuColLabel
- Multi-column dropdown layout automatically generated
- CDK Overlay for dropdown positioning
- Outside click and Escape key close dropdown
- Synchronizes with EuiAppShellService state
- Supports badges and icons on menu items
- Router link integration for navigation
- Custom command functions on items
- openMenu() method to programmatically open
- closeMenu() method to programmatically close
- onItemClick() executes item commands
- Overlay disposed on navigation
- Responsive positioning strategy

### Implements

`OnInit` `AfterViewInit` `OnDestroy` `OnChanges`

### Metadata

changeDetection | `ChangeDetectionStrategy.Default`
selector | `eui-toolbar-mega-menu`
imports | `EUI_ICON` `EUI_BADGE` `EuiToolbarMegaMenuContainerComponent` `RouterLink` `RouterLinkActive` `JsonPipe` `KeyValuePipe` `NgTemplateOutlet` `OverlayModule`
templateUrl | `./toolbar-mega-menu.component.html`
styleUrl | `./toolbar-mega-menu.scss`

### Index

###### Properties
menuItemLinks string subMenuComponent templatePortalContent
###### Methods
Public closeMenu Public onContainerItemClick Public onItemClick openMenu toggleMenu
###### Inputs
ariaLabel id items itemsInput
###### HostBindings
class

### Inputs

ariaLabel
Type : `string`
Default value : ``eUI mega menu ${uniqueId()}``
Provides a unique label for the menubar.

id
Type : `string`
Default value : ``eui-mega-menu ${uniqueId()}``
Provides a unique id for the menubar

items
Type : `Items[]`
Array of menu items to display in the mega menu. Each item should conform to EuiMenuItem interface with support for children, megaMenuColIndex, and megaMenuColLabel properties. Child items are automatically grouped by column for multi-column dropdown layout. Required for menu display.

itemsInput
Type : `Items[]`
Default value : `[]`

### HostBindings

class
Type : `string`
Default value : `'eui-toolbar-mega-menu'`

### Methods

Public closeMenu
`closeMenu(returnFocus: unknown)`
Programmatically closes the currently open mega menu dropdown. Disposes of the overlay and resets active menu state. Can be called externally to close the menu programmatically. Parameters :
Name | Type | Optional | Default value
returnFocus | `unknown` | No | `false`
Returns : `void`

Public onContainerItemClick
`onContainerItemClick(item: EuiMenuItem)`
Parameters :
Name | Type | Optional
item | `EuiMenuItem` | No
Returns : `void`

Public onItemClick
`onItemClick(item: EuiMenuItem)`
Handles click events on menu items. Executes the item's command function if defined. Called internally when user clicks a menu item. Parameters :
Name | Type | Optional
item | `EuiMenuItem` | No
Returns : `void`

openMenu
`openMenu(menuIndex: number, target: Element | PointerEvent)`
Programmatically opens the mega menu dropdown for a specific menu item. Creates overlay with positioning strategy and attaches menu content portal. Sets up outside click and escape key listeners for dismissal. Parameters :
Name | Type | Optional
menuIndex | `number` | No
target | `Element | PointerEvent` | No
Returns : `void`

toggleMenu
`toggleMenu(menuIndex: number, e: PointerEvent)`
Parameters :
Name | Type | Optional
menuIndex | `number` | No
e | `PointerEvent` | No
Returns : `void`

### Properties

menuItemLinks
Type : `QueryList<ElementRef<HTMLElement>>`
Decorators : `@ViewChildren('menuItemLink', {read: ElementRef})`

string
Type : `string`
Default value : `'eui-toolbar-mega-menu'`
Decorators : `@HostBinding('class')`

subMenuComponent
Type : `EuiToolbarMegaMenuContainerComponent`
Decorators : `@ViewChild(EuiToolbarMegaMenuContainerComponent)`

templatePortalContent
Type : `TemplateRef<ElementRef>`
Decorators : `@ViewChild('templatePortalContent')`

# results matching ""

# No results matching ""