Menu Component

This is a component for generating flexible, nestable menus. It can generates nested menus from a flat list with node ids and parentIds.

Demo

http://menu-demo.meteor.com

Usage

Install with:

meteor add utilities:menu

Then just include the menuComponent template while passing the necessary arguments:

{{> menuComponent menuItems=menuItems menuLabel="My Menu" menuClass="my-menu-class"}}

Arguments

All arguments are optional unless specified otherwise.

menuType (String)

One of list, dropdown, or collapsible. Defaults to list.

menuItems (Array) [required]

An array containing the menu's contents (see below).

menuName (String)

The name of the menu. Used to set a *name*-menu CSS class on the menu.

menuLabel (String/Function)

The menu title label, or a function that returns a label. Note that this is required for dropdown menus.

menuLabelTemplate (String)

If provided, will replace the menu label with a custom template.

menuClass (String)

An optional CSS class given to the menu

itemTemplate (String)

A custom template used to display individual menu items (defaults to "defaultMenuItem")

expandLevel (Number)

For collapsible menus only, how far to open the menu. 0 means the menu contents are collapsed, 1 expands the first level, 2 expands up to the second level, etc., and all expands the entire menu. Defaults to 1.

Menu Items Properties

Menu items can have the following properties:

label (String/Function)

The menu item's label, or a function that returns a label.

description (String/Function)

The menu item's description, or a function that returns a description.

route (String/Function)

Either the name of a route to which the menu item should point, or a function that returns a route.

If a route is provided, the class item-active will automatically be added to the menu item when its route is the currently active one.

data (Object)

The data context for the item.

itemClass (String)

The menu item's CSS class.

template (String)

An optional custom template. Overrides both the default template and the itemTemplate menu-level option.

Nested Menu Items Properties

Additionally, menu items take a few additional properties to generate nested menus.

_id (String)

A unique id used for arranging nodes in nested menus.

parentId (String)

The parent node's id.

isExpanded (Boolean)

Whether the item's sub-menu should start off expanded

The Menu Item Template

The menu item template is called with the following data context:

menu (Object)

A reference pointing back to the menu object.

level (Number)

The current nesting level.

item (Object)

The current item to display.

Styling

Out of the box, the menu component accepts a few classes

menu-list (default)

A simple list. Serves as the base for the other styles.

menu-dropdown

A dropdown menu.

menu-collapsible

A collapsible menu.

Events

The menu component includes a few events. Classes used for JS event targeting start with the js- prefix.

click .js-menu-toggle

Makes the current node's child menu expand and collapse.