Default Menu

By default, the Menu control has a tree-like structure with root items aligned horizontally and sub-items available in drop-down menus. Menu items can be declared using the Menu control's Items method. An item's Items method allows you to declare sub-items. The horizontal Menu re-orients its root items vertically if the display width is insufficient.

@(Html.DevExpress()
    .BootstrapMenu("MenuDefault")
    .ShowPopOutImages(true)
    .Items(items=> {
        items.Add().Text("Home").IconCssClass("fa fa-home")
            .Items(subItems => {
                subItems.Add().Text("News")
                    .Items(innerItems => {
                        innerItems.Add().Text("For Developers");
                        innerItems.Add().Text("Website news");
                    });
                subItems.Add()
                    .Text("Our Mission")
                    .BeginGroup(true);
                subItems.Add().Text("Our Customers");
            });
        items.Add().Text("Products")
            .Items(subItems => {
                subItems.Add().Text("Subscriptions / Packs");
                subItems.Add().Text(".NET Windows Forms Components");
                subItems.Add().Text("Reporting / Printing Suites");
                subItems.Add().Text("VCL Components and Tools");
                subItems.Add().Text("ASP.NET Components");
            });
        items.Add().Text("Support")
            .Items(subItems => {
                subItems.Add().Text("Knowledge Base");
                subItems.Add().Text("Documentation");
                subItems.Add().Text("Support Center");
                subItems.Add().Text("Newsgroups");
                subItems.Add().Text("Best Practicies");
            });
    }))

Vertical Orientation

By default, if the display resolution allows, the Menu arranges its items horizontally. To switch to the vertical orientation, call the Menu control’s Orientation method with the Vertical parameter. Note that a horizontally oriented menu can also be displayed vertically to fit a low-resolution display.

@(Html.DevExpress()
    .BootstrapMenu("MenuVertical")
    .Orientation(Orientation.Vertical)
    .Items(items => {
        ...
    })
)

Item AutoWidth

To control how root menu item widths are calculated, use the ItemAutoWidth method. To make root items automatically resized to fit the Menu control's width, pass true the ItemAutoWidth method.

@(Html.DevExpress()
    .BootstrapMenu("MenuItemAutoWidth")
    .ItemAutoWidth(true)
    .ShowPopOutImages(true)
    .Items(items => {
        ...
    }))

The Menu control supports selection of root items with a mouse click. To allow item selection, call the Menu control’s AllowSelectItem method with true parameter. Note that only one item can be selected at a time.

Handle the client ItemClick event to detect a selection change. You can identify the clicked item by the value of its Name property.

Menu control's methods:

Client menu control's methods:

Moreover, the Bootstrap Menu control can automatically select an item for a current page. You can control this behavior using the SyncSelectionMode method.

@(Html.DevExpress()
    .BootstrapMenu("MenuSelection")
    .AllowSelectItem(true)
    .Items(items => {
        ...
    }))

Item Checking

This feature allows you to arrange menu items into logical check groups in which items behave as radio buttons. You can assign a check group to an item by calling the item’s GroupName method. Within a logical check group only one item can be selected at a time. The Menu control allows you to define an unlimited number of check groups for both root items and sub-items. Also you can set the group name to a unique value to force the menu item to change its checked state on every click.

You can detect a change in an item’s checked state by handling the client ItemClick event.

@(Html.DevExpress()
    .BootstrapMenu("MenuChecking")
    .Items(items => {
        items.Add()
            .Text("Item 1")
            .GroupName("Group1");
        items.Add()
            .Text("Item With Subitems")
            .Items(subItems => {
                subItems.Add()
                    .Text("Sub Item 1")
                    .GroupName("SubItemGroup1")
                    .Checked(true);
                subItems.Add()
                    .Text("Sub Item 2")
                    .GroupName("SubItemGroup2");
                subItems.Add()
                    .Text("Sub Item 3")
                    .GroupName("SubItemGroup3");
            });
        items.Add()
            .Text("Item 3")
            .GroupName("Group3")
            .Checked(true);
        items.Add()
            .Text("Item 4")
            .GroupName("Group4");
    }))

The Menu control can display supplementary information for any item within a badge. A badge can display text and/or icon. Use the following API to set contents of item badges:

The methods listed below allow you to manipulate badges on the client:

Note that the Badge method does not affect templated menu items.

@(Html.DevExpress()
    .BootstrapMenu("BadgesMenu")
    .Items(items => {
        items.Add()
            .Text("Inbox")
            .Badge(badge => badge.Text("10"));
        items.Add().Text("Sent Items");
        items.Add()
            .Text("Drafts")
            .Badge(badge => badge.Text("1"));
        items.Add()
            .Text("Spam")
            .Badge(badge => badge.Text("3"));
    })
    .ClientSideEvents(events => events.ItemClick("onItemWithBadgeClick")))
function onItemWithBadgeClick(s, e) {
    if(e.item.GetBadgeText())
        e.item.SetBadgeText("");
}

The Menu control supports templates allowing you to customize control appearance and layout. A template can be applied to all menu items (using control level templates) or a specific menu item (using item level templates). Use the following methods to specify templates.

Menu methods:

Menu item methods:

@(Html.DevExpress()
    .BootstrapMenu("TemplatesMenu")
    .ItemTextTemplate(t => @<text>
            <span class="badge pull-right">
                1
            </span>
        </text>)
    .SubMenuTemplate(t => @<text>
            <h4 class="mt-0">@t.Item.Text</h4>
            <hr />
            <div class="media">
                <div class="mr-3">
                    <span class="fa fa-bell-o text-info"></span>
                </div>
                <div class="media-body">
                    <p class="text-justify text-info">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sem lorem, rutrum at tincidunt aliquam, vulputate sit amet tellus.
                    </p>
                </div>
            </div>
        </text>)
    ...
    
)

This demo illustrates the capabilities of the Menu control's client events and allows you to specify which client-side events you want to track. Interact with the Menu interface to see the information about all tracked events raised in response to your actions in the event log.

The item.name property of the event handler's parameter allows you to identify the item for which an event has been raised.

Trace Events:
<script type="text/javascript">
    function onPopUp(s, e) {
        dxbsDemo.eventMonitor.trace(s, e, 'PopUp');
    }
    function onCloseUp(s, e) {
        dxbsDemo.eventMonitor.trace(s, e, 'CloseUp');
    }
    function onItemMouseOver(s, e) {
        dxbsDemo.eventMonitor.trace(s, e, 'ItemMouseOver');
    }
    function onItemMouseOut(s, e) {
        dxbsDemo.eventMonitor.trace(s, e, 'ItemMouseOut');
    }
    function onItemClick(s, e) {
        dxbsDemo.eventMonitor.trace(s, e, 'ItemClick');
    }
    function onInit(s, e) {
        dxbsDemo.eventMonitor.trace(s, e, 'Init');
    }
</script>
@(Html.DevExpress()
    .BootstrapMenu("ClientSideEventsMenu")
    .ClientSideEvents(events => {
        events.PopUp("onPopUp");
        events.CloseUp("onCloseUp");
        events.ItemMouseOver("onItemMouseOver");
        events.ItemMouseOut("onItemMouseOut");
        events.ItemClick("onItemClick");
        events.Init("onInit");
    })
    .Items(items => {
        ...
    }))

The Menu control offers an advanced client-side API allowing you to manipulate the control and its elements.

The EnableClientSideAPI method specifies whether or not the client-side API is available. Note that the client-side API is automatically enabled if the ClientInstanceName method has been called or any client-side event available through the ClientSideEvents method is handled.

This demo allows you to interactively explore capabilities of the Menu control's client-side API.

BootstrapClientMenu methods:

BootstrapClientMenuItem methods:

@(Html.DevExpress()
    .BootstrapMenu("menuControl")
    .EnableClientSideAPI(true)
    .AllowSelectItem(true)
    ...
)
Screen Size
Color Themes
Demo QR Code