jQuery UI Menu

jQuery UI Menu turns a nested list into a keyboard-accessible menu with submenus, active-item navigation, positioning and selection events.

Basic Menu Top ↑

$( function () {
    $( "#my_menu" ).menu();
});

Demo: Menu with different themes →

Menu Options Top ↑

classes

Add custom classes to Menu structural elements.

$( "#my_menu" ).menu({
    classes: {
        "ui-menu": "ui-state-highlight"
    }
});

const menuClass =
    $( "#my_menu" ).menu(
        "option",
        "classes.ui-menu"
    );

$( "#my_menu" ).menu(
    "option",
    "classes.ui-menu",
    "my-menu-class"
);

Demo: classes →

disabled

Disable or enable the complete menu.

$( "#my_menu" ).menu({
    disabled: true
});

const disabled =
    $( "#my_menu" ).menu(
        "option",
        "disabled"
    );

$( "#my_menu" ).menu(
    "option",
    "disabled",
    false
);

Demo: disabled →

icons

Choose the icon used for submenus.

$( "#my_menu" ).menu({
    icons: {
        submenu: "ui-icon-circle-triangle-e"
    }
});

const icons =
    $( "#my_menu" ).menu(
        "option",
        "icons"
    );

Demo: icons →

items

Change which direct children are treated as menu items.

$( "#my_menu" ).menu({
    items: "> li"
});

const items =
    $( "#my_menu" ).menu(
        "option",
        "items"
    );

Demo: items →

menus

Choose the element type/selector used for nested menus.

$( "#my_menu" ).menu({
    menus: "ul"
});

const menus =
    $( "#my_menu" ).menu(
        "option",
        "menus"
    );

Demo: menus →

position

Control submenu placement relative to the active parent item.

$( "#my_menu" ).menu({
    position: {
        my: "left top",
        at: "right top"
    }
});

const options =
    $( "#my_menu" ).menu( "option" );

$( "#my_menu" ).menu(
    "option",
    "position",
    {
        my: "right top",
        at: "left top"
    }
);

Demo: position →

role

Control the ARIA role applied by the widget. Leave the default menu role unless another accessible semantic is deliberately provided.

$( "#my_menu" ).menu({
    role: "menu"
});

const role =
    $( "#my_menu" ).menu(
        "option",
        "role"
    );

Menu Methods Top ↑

blur()

Remove focus from the active menu item and reset the active path.

$( "#my_menu" ).menu( "blur" );

Demo: blur() →

collapse()

Close the active submenu.

$( "#my_menu" ).menu( "collapse" );

collapseAll()

Close all open submenus.

$( "#my_menu" ).menu( "collapseAll", null, true );

destroy()

Remove Menu behavior and restore the original markup.

$( "#my_menu" ).menu( "destroy" );

Demo: destroy() →

disable()

Disable the menu.

$( "#my_menu" ).menu( "disable" );

Demo: disable() →

enable()

Enable a disabled menu.

$( "#my_menu" ).menu( "enable" );

Demo: enable() →

expand()

Open the submenu of the active item.

$( "#my_menu" ).menu( "expand" );

focus()

Activate a particular menu item.

const $item =
    $( "#my_menu" ).find( "#item-games" );

$( "#my_menu" ).menu(
    "focus",
    null,
    $item
);

Demo: focus() →

instance()

Return the Menu widget instance.

const instance = $( "#my_menu" ).menu( "instance" );

isFirstItem()

Return whether the current active item is the first item.

const first = $( "#my_menu" ).menu( "isFirstItem" );

Demo: isFirstItem() →

isLastItem()

Return whether the current active item is the last item.

const last = $( "#my_menu" ).menu( "isLastItem" );

Demo: isLastItem() →

next()

Move the active state to the next item.

$( "#my_menu" ).menu( "next" );

Demo: next() →

nextPage()

Move focus by approximately one menu page when scrolling is involved.

$( "#my_menu" ).menu( "nextPage" );

Demo: nextPage() →

option()

Read one option or the complete option object.

const menus =
    $( "#my_menu" ).menu(
        "option",
        "menus"
    );

const options =
    $( "#my_menu" ).menu( "option" );

Demo: option() →

Demo: read Menu options as an object →

previous()

Move the active state to the previous item.

$( "#my_menu" ).menu( "previous" );

Demo: previous() →

previousPage()

Move focus by approximately one menu page upward when scrolling is involved.

$( "#my_menu" ).menu( "previousPage" );

Demo: previousPage() →

refresh()

Refresh Menu after adding/removing items or submenus directly in the DOM.

$( "#my_menu" ).menu( "refresh" );

Demo: refresh() →

select()

Select the currently active item programmatically.

$( "#my_menu" ).menu( "select" );

Demo: select() →

widget()

Return the menu element as a jQuery object.

const menu = $( "#my_menu" ).menu( "widget" );

Demo: widget() →

Menu Events Top ↑

blur

Runs when the menu loses active focus.

$( "#my_menu" ).on(
    "menublur",
    function ( event, ui ) {
        console.log( "blur" );
    }
);

Demo: blur event →

create

Runs when the Menu widget is initialized.

$( "#my_menu" ).on(
    "menucreate",
    function ( event, ui ) {
        console.log( "create" );
    }
);

Demo: create event →

focus

Runs when a menu item receives active focus.

$( "#my_menu" ).on(
    "menufocus",
    function ( event, ui ) {
        console.log( "focus" );
    }
);

Demo: focus event →

select

Runs when the user selects a menu item.

$( "#my_menu" ).on(
    "menuselect",
    function ( event, ui ) {
        console.log( "select" );
    }
);

Demo: select event →

Change Menu Width Top ↑

.ui-menu {
    width: 10rem;
}

Scrollable or Fixed Menu Styling Top ↑

The original page demonstrated CSS for scrolling and fixed positioning. Apply these only when they match the layout requirement.

.my-scroll-menu {
    max-height: 20rem;
    overflow-y: auto;
}

/* Use fixed positioning only when the interface really requires it. */
.my-fixed-menu {
    position: fixed;
    z-index: 100;
}

← jQuery UI tutorials

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: