@vendasta/fec-menu

## Requirements

Stats

StarsIssuesVersionUpdatedCreatedSize
@vendasta/fec-menu
1.1.25 years ago5 years agoMinified + gzip package size for @vendasta/fec-menu in KB

Readme

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>

emample menu rendering

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>

example menu item rendering

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.