# EuiToolbarMegaMenuComponent

**Type:** component



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.

```html
<eui-app>
  <eui-app-toolbar>
    <eui-toolbar>
      <eui-toolbar-mega-menu [items]="menuItems"></eui-toolbar-mega-menu>
    </eui-toolbar>
  </eui-app-toolbar>
</eui-app>
```
```typescript
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


**Selector:** `eui-toolbar-mega-menu`

## Inputs
- **ariaLabel**: `string` - Provides a unique label for the menubar.
- **id**: `string` - Provides a unique id for the menubar
- **items**: `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**: `Items[]` -