Skip to main content

​
Overview

Menubar displays a horizontal menu bar with dropdown submenus.

​
Import

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

​
Basic Usage

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

​
With Nested Submenus

items: MenuItem[] = [
  {
    label: 'File',
    items: [
      {
        label: 'New',
        icon: 'plus',
        items: [
          { label: 'Project', icon: 'folder' },
          { label: 'File', icon: 'file' },
          { label: 'Folder', icon: 'folder-plus' }
        ]
      },
      {
        label: 'Export',
        icon: 'download',
        items: [
          { label: 'PDF' },
          { label: 'Excel' },
          { label: 'CSV' }
        ]
      }
    ]
  }
];

items: MenuItem[] = [
  {
    label: 'Home',
    icon: 'home',
    routerLink: '/'
  },
  {
    label: 'Products',
    icon: 'package',
    items: [
      { label: 'All Products', routerLink: '/products' },
      { label: 'Categories', routerLink: '/categories' },
      { label: 'Brands', routerLink: '/brands' }
    ]
  },
  {
    label: 'About',
    icon: 'info',
    routerLink: '/about'
  }
];

​
Input Properties

​
model
MenuItem[]
default:"[]"
Array of menu items
​
style
Record<string, any>
Inline styles for the component
​
styleClass
string
default:"''"
CSS class for the component

​
Features

  • Horizontal layout: Top-level items displayed horizontally
  • Dropdown submenus: Nested items shown in dropdowns
  • Hover activation: Submenus open on hover
  • Router integration: Navigate with Angular Router
  • Icons: Support for Lucide icons
  • Multi-level: Unlimited nesting depth
  • Click outside: Auto-close when clicking outside

​
Accessibility

  • ARIA menubar role
  • Keyboard navigation (Arrow keys, Enter, Escape)
  • Focus management
  • Screen reader support

Build docs developers (and LLMs) love

Get started for freeTalk to us