# 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](/menu-doc#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

```json
[
    {
        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
 
```html
<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-example-rendering.png)

## 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](/icon-doc#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

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

![example menu item rendering](menu-item-example-rendering.png)