Menu Module Name: MenuModule

Module Name: MenuModule

Menu's can be pretty fancy and TrulyUI have a few options to set up

Showcase
[mode] = 'simple'

SimpleMenu

<tl-menu
  [items]="menuItems"
  [link]="'link'"
  [width]="'250px'"
  [label]="'label'"
  [group]="'category'"
  [subItem]="'subItem'"
  [icon]="'icon'">
</tl-menu>
<tl-menu
  [items]="menuItems"
  [link]="'link'"
  [label]="'label'"
  [docked]="true"
  [group]="'category'"
  [subItem]="'subItem'"
  [icon]="'icon'">
</tl-menu>
[mode] = 'advanced'

AdvancedMenu

<tl-menu
  [items]="menuItems"
  [link]="'link'"
  [width]="'250px'"
  [filterEmptyMessage]="'Not Found'"
  [inputPlaceholder]="'Type something...'"
  [titleMenu]="'Main Menu'"
  [label]="'label'"
  [group]="'category'"
  [subItem]="'subItem'"
  [mode]="'advanced'"
  [icon]="'icon'">
</tl-menu>
<tl-menu
  [items]="menuItems"
  [link]="'link'"
  [width]="'200px'"
  [filterEmptyMessage]="'Not Found'"
  [inputPlaceholder]="'Type something...'"
  [titleMenu]="'Main Menu'"
  [label]="'label'"
  [docked]="true"
  [dockWidth]="'35px'"
  [group]="'category'"
  [subItem]="'subItem'"
  [mode]="'advanced'"
  [icon]="'icon'">
</tl-menu>
Properties
NameTypeDefaultDescriptionOptions
alwaysActive (object)booleanfalseObject key to set colorized item true | false
charsToSearchnumber2Determine number of chars that going to be used to search on AdvancedMenu. number
dockWidthstring40pxWidth of menu when menu is docked. px | %
dockedbooleanfalseProperty to toggle bind docked menu. px | %
filterEmptyMessagestringNothing to ShowText that will display when the search return null. string
groupstringnullKey that will display menu group. string
iconstringnullKey that will display menu icon. string
inputPlaceholderstringSearch...Text of input search placeholder string
itemHeightstring30pxLine item height string
itemsArray<Object>nullList of items that will fill menu. Array<Object>
labelstringbasicKey that will display menu label. string
linkstringnullRouter link string used to navigate. string [routerLink]
maxHeightstring800pxMax height of menu box. px | %
modestringsimpleType of menu simple | advanced
operationModestringhoverMode that menu operates click | hover
outsideBorderbooleanfalseControls if the menu box will show border or not true | false
subItemstringnullKey that will display subItem. string
titleMenustringMain MenuText of menu title string
widthstring200pxWidth of menu when not docked. px | %
widthRootMenustring250pxWidth of root menu px | %
Events
NameParametersDescription
callBack
MouseEvent : Native Mouse Event
Callback to invoke when a menu item is clicked, used on object of Items