Skip to main content

​
Overview

MegaMenu displays a large menu with multiple columns of items, ideal for complex navigation structures.

​
Import

import { MagaryMegaMenu, MenuItem } from 'ng-magary';

​
Basic Usage

<magary-megamenu [model]="items"></magary-megamenu>

​
Vertical Orientation

<magary-megamenu 
  [model]="items"
  [orientation]="'vertical'">
</magary-megamenu>

​
Input Properties

​
model
MenuItem[]
default:"[]"
Array of menu items with column structure
​
orientation
'horizontal' | 'vertical'
default:"'horizontal'"
Menu orientation
​
style
Record<string, any>
Inline styles for the component
​
styleClass
string
default:"''"
CSS class for the component

​
Features

  • Multi-column layout: Display items in columns
  • Horizontal/Vertical: Support for both orientations
  • Hover activation: Panels open on hover
  • Router integration: Works with Angular Router
  • Icons: Support for Lucide icons
  • Large content: Ideal for complex navigation
  • Click outside: Auto-close behavior

​
Accessibility

  • ARIA attributes
  • Keyboard navigation
  • Focus management
  • Screen reader support

Build docs developers (and LLMs) love

Get started for freeTalk to us