Skip to main content

​
Overview

Sidebar provides a collapsible navigation panel with support for menu sections, user profile, and mobile responsive behavior.

​
Import

import { Sidebar } from 'ng-magary';

​
Basic Usage

<magary-sidebar
  [menu]="menuItems"
  [appTitle]="'My App'"
  [logoSrc]="'assets/logo.svg'">
</magary-sidebar>

​
With User Section

<magary-sidebar
  [menu]="menuItems"
  [showUserSection]="true"
  [userName]="'John Doe'"
  [userEmail]="'[email protected]'"
  [avatarConfig]="{
    type: 'label',
    label: 'JD',
    size: 'normal',
    shape: 'circle'
  }"
  [showLogoutButton]="true"
  (onLogout)="handleLogout()">
</magary-sidebar>

​
With Sections

import { SidebarSection } from 'ng-magary';

sections: SidebarSection[] = [
  {
    title: 'Main',
    icon: 'home',
    items: [
      { label: 'Dashboard', icon: 'layout-dashboard', route: '/' },
      { label: 'Analytics', icon: 'bar-chart', route: '/analytics' }
    ]
  },
  {
    title: 'Settings',
    icon: 'settings',
    items: [
      { label: 'Profile', route: '/profile' },
      { label: 'Preferences', route: '/preferences' }
    ]
  }
];

<magary-sidebar [sections]="sections"></magary-sidebar>

​
Collapsible Sidebar

<magary-sidebar
  [menu]="menuItems"
  [collapsible]="true"
  [showToggle]="true">
</magary-sidebar>

​
Input Properties

​
sections
SidebarSection[]
default:"[]"
Array of menu sections with items
​
menu
MenuItem[]
default:"[]"
Simple menu items array (alternative to sections)
​
menuTitle
string
default:"'Menu'"
Title for the menu section
​
showUserSection
boolean
default:"false"
Display the user profile section
​
showUserAvatar
boolean
default:"true"
Show user avatar in user section
​
showUserName
boolean
default:"true"
Show user name in user section
​
showUserEmail
boolean
default:"true"
Show user email in user section
​
showLogoutButton
boolean
default:"true"
Show logout button in user section
​
userName
string
default:"'John Doe'"
Name displayed in user section
​
userEmail
string
default:"'[email protected]'"
Email displayed in user section
​
avatarConfig
SidebarAvatarConfig
Configuration for user avatar
​
logoSrc
string
default:"'assets/logo.svg'"
Path to logo image
​
appTitle
string
default:"'PRIMENG'"
Application title displayed in header
​
collapsible
boolean
default:"true"
Whether sidebar can be collapsed
​
showToggle
boolean
default:"true"
Show collapse toggle button
Display the logo
​
closeOnEscape
boolean
default:"true"
Close mobile sidebar on Escape key
​
trapFocus
boolean
default:"true"
Trap focus within sidebar when open (mobile)

​
Output Events

​
onLogout
EventEmitter<void>
Emitted when logout button is clicked
​
closeSidebar
EventEmitter<void>
Emitted when mobile sidebar is closed

​
Interfaces

interface SidebarSection {
  title: string;
  icon?: string;
  items: MenuItem[];
  backgroundColor?: string;
  textColor?: string;
  hoverColor?: string;
  iconClass?: string;
}

interface SidebarAvatarConfig {
  type: 'image' | 'label' | 'icon';
  size?: AvatarSize;
  shape?: AvatarShape;
  image?: string;
  label?: string;
  icon?: string;
  badgeValue?: string;
  badgeSeverity?: BadgeSeverity;
}

​
Features

  • Responsive: Mobile-friendly with overlay mode
  • Collapsible: Desktop collapse functionality
  • User section: Display user info and logout
  • Panel menus: Expandable menu sections
  • Router integration: Navigation with Angular Router
  • Focus trap: Keyboard navigation support
  • Auto-close: Closes on route change (mobile)
  • Accessibility: Full keyboard and screen reader support

​
Accessibility

  • ARIA labels and roles
  • Keyboard navigation (Tab, Escape)
  • Focus management
  • Screen reader announcements
  • Focus trap in mobile mode

Build docs developers (and LLMs) love

Get started for freeTalk to us