jQuery UI Helpers / Menu

Simple Menu

You can create a menu with the Menu method. To define menu items use the MenuItem class and supply them to the Menu helper.

The following example creates a simple menu.

@Html.JQueryUI().Menu(
        new MenuItem("Overview"),
        new MenuItem("Getting Started"),
        new MenuItem("Events")
    )

This is the result.

  • Overview
  • Getting Started
  • Events

Hierarchical Menu

Menu items can contain other menu items to form a hierarchical menu structure. This is demonstrated below.

@Html.JQueryUI().Menu(
        new MenuItem("File", 
                new MenuItem("New"),
                new MenuItem("Open"),
                new MenuItem("Save")
                ),
        new MenuItem("Edit", 
                new MenuItem("Cut"),
                new MenuItem("Copy"),
                new MenuItem("Pase"),
                new MenuItem("Search")
                ),
        new MenuItem("About")
    )

This is the menu.

  • File
    • New
    • Open
    • Save
  • Edit
    • Cut
    • Copy
    • Pase
    • Search
  • About

Configuration

Like the other widgets the menu also has a fluent configuration API. The next example assigns a JavaScript function to the select event.

@Html.JQueryUI().Menu(
        new MenuItem("Overview"),
        new MenuItem("Getting Started"),
        new MenuItem("Events")
    ).OnSelect("menu.select")

If you click on a menu item, the selected item will be displayed in a message box.

  • Overview
  • Getting Started
  • Events

HTML Helpers

Fluent Configuration API