## Requirements

Downloads in past


1.1.26 years ago6 years agoMinified + gzip package size for @vendasta/fec-menu in KB




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


  • 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>

emample menu rendering


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


<va-menu-item [activeMenuId]="activeMenuId" [menuItem]="subMenuItem" (expandEvent)="expandAction($event)" (menuItemClickEvent)="onMenuItemClick($event);"></va-menu-item>

example menu item rendering