Skip to main content

​
Overview

SlideMenu displays a menu with animated slide transitions for navigating through submenus.

​
Import

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

​
Basic Usage

<magary-slidemenu 
  [model]="items"
  [menuWidth]="300"
  [viewportHeight]="400">
</magary-slidemenu>

​
Custom Dimensions

<magary-slidemenu 
  [model]="items"
  [menuWidth]="'400px'"
  [viewportHeight]="'600px'">
</magary-slidemenu>

​
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
​
menuWidth
number | string
default:"300"
Width of the menu (pixels or CSS string)
​
viewportHeight
number | string
default:"400"
Height of the viewport (pixels or CSS string)

​
Features

  • Slide animation: Smooth transitions between levels
  • Back navigation: Navigate back through breadcrumbs
  • Header display: Shows current submenu title
  • Router integration: Works with Angular Router
  • Icons: Support for Lucide icons
  • Nested levels: Unlimited depth
  • Compact design: Good for mobile interfaces
  • Click an item with subitems to slide to that submenu
  • Use back button to return to previous level
  • Animated transitions between levels

​
Accessibility

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

Build docs developers (and LLMs) love

Get started for freeTalk to us