Skip to main content

​
Overview

PanelMenu is an accordion-style menu component that displays hierarchical navigation items with expand/collapse functionality.

​
Import

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

​
Basic Usage

<magary-panelmenu
  [title]="'Navigation'"
  [items]="menuItems"
  (itemClick)="handleItemClick($event)">
</magary-panelmenu>

​
Custom Styling

<magary-panelmenu
  [title]="'Menu'"
  [items]="items"
  [backgroundColor]="'#1e293b'"
  [textColor]="'#f8fafc'"
  [hoverColor]="'#3b82f6'"
  [borderRadius]="'12px'"
  [width]="'300px'">
</magary-panelmenu>

​
Allow Multiple Expanded

<magary-panelmenu
  [items]="items"
  [allowMultipleExpanded]="true"
  [defaultOpen]="true">
</magary-panelmenu>

​
Input Properties

​
title
string
default:"'Panel Menu'"
Title displayed in the panel header
​
icon
string
Icon displayed next to the title
​
iconClass
string
default:"''"
CSS class for the icon
​
items
MenuItem[]
default:"[]"
Array of menu items to display
​
backgroundColor
string
default:"'#f9fafb'"
Background color of the panel
​
textColor
string
default:"'#1f2937'"
Text color for menu items
​
borderRadius
string
default:"'8px'"
Border radius of the panel
​
shadow
number
default:"0"
Shadow depth (0-5)
​
width
string
default:"'100%'"
Width of the panel
​
hoverColor
string
default:"'#007bff'"
Hover color for menu items
​
allowMultipleExpanded
boolean
default:"false"
Allow multiple menu sections to be expanded simultaneously
​
defaultOpen
boolean
default:"false"
Whether the panel is open by default
​
collapsed
boolean
default:"false"
Whether the panel is in collapsed state

​
Output Events

​
menuToggle
EventEmitter<MenuToggleEvent>
Emitted when the panel is toggled
​
itemClick
EventEmitter<MenuItemClickEvent>
Emitted when a menu item is clicked
​
itemExpand
EventEmitter<{item: MenuItem, expanded: boolean}>
Emitted when a menu item is expanded or collapsed
​
expandSidebar
EventEmitter<void>
Emitted when sidebar needs to expand (for collapsed mode)
interface MenuItem {
  label?: string;
  icon?: string;
  route?: string;
  routerLink?: string | any[];
  items?: MenuItem[]; // Nested items
  children?: MenuItem[]; // Alternative to items
  disabled?: boolean;
  command?: (event?: any) => void;
  url?: string;
  target?: string;
}

​
Event Interfaces

interface MenuItemClickEvent {
  item: MenuItem;
  level: number;
  path: string[];
}

interface MenuToggleEvent {
  isOpen: boolean;
  menuTitle: string;
}

​
Features

  • Hierarchical navigation: Multi-level nested menu items
  • Expand/collapse: Interactive accordion behavior
  • Router integration: Works with Angular Router
  • Custom styling: Fully customizable colors and dimensions
  • Icon support: Display icons with Lucide Angular
  • Hover states: Visual feedback on interaction
  • Disabled items: Support for disabled menu items

​
Accessibility

  • Keyboard navigation
  • ARIA attributes for screen readers
  • Focus management

Build docs developers (and LLMs) love

Get started for freeTalk to us