Wijmo

Hierarchical Menus

Create hierarchical menus using Wijmo's Menu control.

Wijmo's hierarchical menus support all the options supported by flat menus, including openOnHover, isAnimated, and right-to-left layouts.

The menu bar above contains three Menu controls. Each one is bound to a hierarchical list of commands which is an array of objects where items may contain child items. For example, the File menu has a New option with three sub-items: Project, Site, and File.

The first two menus respond to the menu's itemClicked event, which is raised when the user clicks an item that does not contain child items.

This is how the File menu was created:

// create File menu (uses itemClicked event)
var menuFile = new wijmo.input.Menu('#menu-file', {
    header: 'File',
    displayMemberPath: 'header',
    subItemsPath: 'items',
    itemsSource: getFileMenuItems(),
    itemClicked: function (s, e) {
        target.innerHTML = 'Thank you for clicking <b><i>' + s.text + '</i></b>!';
    }
});

The last menu, Format, uses a command object that contains two functions:

Both functions take a parameter that is defined by the menu option objects. The command property is often used in MVVM applications. It provides a convenient way to centralize menu handling (enabling and invoking commands).

This is how the Format menu was created:

// create Format menu (uses command property)
var menuFormat = new wijmo.input.Menu('#menu-format', {
    header: 'Format',
    displayMemberPath: 'header',
    subItemsPath: 'items',
    itemsSource: getFormatMenuItems(),
    command: getFormatMenuCommand()
});