menu
Requirements
When using the menu component in your app:
- add
@vendasta/fec-menu
to the dependencies of your app - add
MenuModule
to the import list in angular module
Usage
- add
<va-menu></va-menu>
to the template of the parent component
Input | Description |
---|---|
menuItems | JSON list of objects for menu item arguments |
activeMenuId | which menu item should be marked as the currently visited location |
url | URL to request JSON data of menuItems (instead of using menuItems) |
autoClose | The menu will automatically close when user click somewhere other than this menu area |
No default menu items will be populated. Specify menu items via the menuItems
input.
Example menuItems JSON data
[
{
label: 'menu item with no URL',
menuId: 'no-url-do-something',
ngRoute: false
},
{
label: 'WTF is “nyancat”?',
menuId: 'go-to-lmgtfy',
url: 'lmgtfy.com/?q=nyancat',
ngRoute: false
},
{
label: 'Route managed by Angular Router',
menuId: 'angular-route',
url: '/angular-app',
ngRoute: true
}
]
Example output
<va-menu [activeMenuId]="activeMenuId" [url]="apiUrl" [menuItems]="[ {label: 'menu item with no URL', menuId: 'no-url-do-something', ngRoute: false}, {label: 'WTF is “nyancat”?', menuId: 'go-to-lmgtfy', url: 'lmgtfy.com/?q=nyancat', ngRoute: false}]" (menuItemClickEvent)="onMenuItemClick($event);" [autoClose]="true"></va-menu>
menu-item
Chiefly used by menu. Generates <li>
elements, so must be used within a <ul>
or <ol>
.
Component inputs
Input | Description |
---|---|
menuItem | MenuItem object |
activeMenuId | string |
MenuItem object
Field | Description |
---|---|
url | [optional] Read by MenuItemComponent when handling clicks |
label | Text displayed |
menuId | string defining the unique identity within the app |
icon | [optional] class name for CSS applied icon, on the left |
nestedItems | [optional] list of MenuItem objects for a sub menu |
expanded | boolean for sub menu, if it exists — sets whether sub menu is expanded when menu initially renders |
rightIcon | [optional] class name for another icon, on the right; overrides sub menu icon, if it exists |
ngRoute | Indicate this route is managed by angular router or not |
Example
<va-menu-item [activeMenuId]="activeMenuId" [menuItem]="subMenuItem" (expandEvent)="expandAction($event)" (menuItemClickEvent)="onMenuItemClick($event);"></va-menu-item>