### File

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

### Description

Container component for rendering the mega menu dropdown content with multi-column layout. Displays grouped menu items organized by parent, column index, and column label in a structured grid. Handles menu item clicks and executes associated command functions. Used internally by EuiToolbarMegaMenuComponent to render the dropdown panel content. Supports router links, badges, and icons on menu items.

Example :

    <!-- Used internally by eui-toolbar-mega-menu -->
    <eui-toolbar-mega-menu-container
      [megaMenuItemsGrouped]="groupedItems"
      [activeMenu]="0">
    </eui-toolbar-mega-menu-container>

Example :

    // Grouped structure created by parent component
    megaMenuItemsGrouped = {
      0: {
        '0': { 'Category A': [{ label: 'Item 1', url: '/item1' }] },
        '1': { 'Category B': [{ label: 'Item 2', url: '/item2' }] }
      }
    };

### Accessibility

- Router link integration for navigation
- Keyboard accessible menu items
- Semantic structure for menu layout
- Focus management for dropdown items
- ARIA attributes inherited from parent

### Notes

- Used internally by eui-toolbar-mega-menu
- Not intended for standalone usage
- Renders dropdown panel content
- Multi-column grid layout automatically generated
- megaMenuItemsGrouped structure: parent → column → label → items
- activeMenu determines which parent's children to display
- onItemClick() executes item command functions
- Supports router links via RouterLink directive
- Badge and icon support on menu items
- Column labels used as section headers
- Grid layout adapts to number of columns
- Items grouped by megaMenuColIndex and megaMenuColLabel

### Metadata

selector | `eui-toolbar-mega-menu-container`
imports | `EUI_ICON` `EUI_BADGE` `JsonPipe` `KeyValuePipe` `NgTemplateOutlet` `RouterLink` `RouterLinkActive`
templateUrl | `./toolbar-mega-menu-container.component.html`
styleUrl | `./toolbar-mega-menu-container.component.scss`

### Index

###### Properties
string submenuItemLinks
###### Methods
focusFirstItem onItemClick
###### Inputs
activeMenu ariaLabel megaMenuItemsGrouped
###### Outputs
itemClick
###### HostBindings
class

### Inputs

activeMenu
Type : `number`
Default value : `null`
Index of the currently active menu item whose dropdown is displayed. Used to determine which parent menu's children to render in the dropdown. When null, no dropdown is displayed.

ariaLabel
Type : `string`
Default value : `'eUI sub menu'`
Provides accessibility labeling for the dropdown menu.

megaMenuItemsGrouped
Type : `literal type`
Grouped menu items organized by parent index, column index, and column label. Structure: { [parentIndex]: { [colIndex]: { [colLabel]: Items[] } } } Provided by parent EuiToolbarMegaMenuComponent after processing menu items. Required for rendering the multi-column dropdown layout.

### Outputs

itemClick
Type : `EventEmitter`
Emits an output event when item is clicked

### HostBindings

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

### Methods

focusFirstItem
`focusFirstItem()`
Focuses the first item in the submenu. Returns : `void`

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

### Properties

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

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

# results matching ""

# No results matching ""