@vendasta/fec-menu NPM

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>