# EuiToolbarMegaMenuContainerComponent

**Type:** component

<p>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.</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;!-- Used internally by eui-toolbar-mega-menu --&gt;
&lt;eui-toolbar-mega-menu-container
  [megaMenuItemsGrouped]=&quot;groupedItems&quot;
  [activeMenu]=&quot;0&quot;&gt;
&lt;/eui-toolbar-mega-menu-container&gt;</code></pre></div><b>Example :</b><div><pre class="line-numbers"><code class="language-typescript">// Grouped structure created by parent component
megaMenuItemsGrouped = {
  0: {
    &#39;0&#39;: { &#39;Category A&#39;: [{ label: &#39;Item 1&#39;, url: &#39;/item1&#39; }] },
    &#39;1&#39;: { &#39;Category B&#39;: [{ label: &#39;Item 2&#39;, url: &#39;/item2&#39; }] }
  }
};</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Router link integration for navigation</li>
<li>Keyboard accessible menu items</li>
<li>Semantic structure for menu layout</li>
<li>Focus management for dropdown items</li>
<li>ARIA attributes inherited from parent</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Used internally by eui-toolbar-mega-menu</li>
<li>Not intended for standalone usage</li>
<li>Renders dropdown panel content</li>
<li>Multi-column grid layout automatically generated</li>
<li>megaMenuItemsGrouped structure: parent → column → label → items</li>
<li>activeMenu determines which parent&#39;s children to display</li>
<li>onItemClick() executes item command functions</li>
<li>Supports router links via RouterLink directive</li>
<li>Badge and icon support on menu items</li>
<li>Column labels used as section headers</li>
<li>Grid layout adapts to number of columns</li>
<li>Items grouped by megaMenuColIndex and megaMenuColLabel</li>
</ul>


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

**Standalone:** false

## Inputs

- **activeMenu**: `number` - <p>Index of the currently active menu item whose dropdown is displayed.
Used to determine which parent menu&#39;s children to render in the dropdown.
When null, no dropdown is displayed.</p>

- **megaMenuItemsGrouped**: `literal type` - <p>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.</p>

