eui documentation
  1. Components
  2. EuiToolbarMegaMenuComponent

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 OverlayModule TranslateModule
templateUrl ./toolbar-mega-menu.component.html
styleUrl ./toolbar-mega-menu.scss

Index

Properties
Methods
Inputs
HostBindings

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)

If the Tab key in the submenu was pressed and null emitted, it captures the host megamenu element, closes the menu and focuses the next focusable element after the megamenu. If item is not null calls the closeMenu method.

Parameters :
Name Type Optional Description
item EuiMenuItem No
  • The item that was clicked or null if tab was pressed
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 ""