eui documentation
  1. Components
  2. EuiToolbarMegaMenuContainerComponent

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 TranslateModule KeyValuePipe NgTemplateOutlet RouterLink RouterLinkActive
templateUrl ./toolbar-mega-menu-container.component.html
styleUrl ./toolbar-mega-menu-container.component.scss

Index

Properties
Methods
Inputs
Outputs
HostBindings

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 ""