Overview
TieredMenu displays nested menu items with hover-activated flyout submenus.
Import
import { MagaryTieredMenu, MenuItem } from 'ng-magary';
Basic Usage
<magary-tiered-menu [model]="items"></magary-tiered-menu>
<button (click)="menu.toggle($event)">Show Menu</button>
<magary-tiered-menu
#menu
[model]="items"
[popup]="true">
</magary-tiered-menu>
With Commands
items: MenuItem[] = [
{
label: 'File',
items: [
{
label: 'Save',
icon: 'save',
command: () => {
this.saveDocument();
}
},
{
label: 'Export',
icon: 'download',
items: [
{
label: 'PDF',
command: () => this.exportPDF()
},
{
label: 'Excel',
command: () => this.exportExcel()
}
]
}
]
}
];
Inline styles for the component
CSS class for the component
Methods
Toggles the menu visibility (popup mode)
Shows the menu (popup mode)
Hides the menu (popup mode)
interface MenuItem {
label?: string;
icon?: string;
command?: (event?: any) => void;
url?: string;
route?: string;
routerLink?: string | any[];
items?: MenuItem[]; // Nested items
disabled?: boolean;
visible?: boolean;
target?: string;
separator?: boolean;
badge?: string;
badgeStyleClass?: string;
styleClass?: string;
style?: any;
queryParams?: any;
fragment?: string;
automationId?: string;
tabindex?: string;
routerLinkActiveOptions?: any;
expanded?: boolean; // Internal state
}
Features
- Nested menus: Multi-level menu hierarchy
- Hover activation: Submenus open on hover
- Popup mode: Display as overlay menu
- Router integration: Navigate with Angular Router
- Icons: Support for Lucide icons
- Commands: Execute functions on item click
- Auto-positioning: Smart submenu placement
- Click outside: Auto-close when clicking outside
Accessibility
- ARIA attributes
- Keyboard navigation
- Focus management
- Screen reader support
