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. Each menu item is represented by a BootstrapMenuItem object and provides access to a collection of its sub-items through the Items collection property. The horizontal Menu re-orients its root items vertically if the display width is insufficient.

<dx:BootstrapMenu runat="server" ShowPopOutImages="true">
    <Items>
        <dx:BootstrapMenuItem Text="Home" IconCssClass="fa fa-home">
            <Items>
                <dx:BootstrapMenuItem Text="News">
                    <Items>
                        <dx:BootstrapMenuItem Text="For Developers">
                        </dx:BootstrapMenuItem>
                        <dx:BootstrapMenuItem Text="Website news">
                        </dx:BootstrapMenuItem>
                    </Items>
                </dx:BootstrapMenuItem>
                <dx:BootstrapMenuItem Text="Our Mission" BeginGroup="true">
                </dx:BootstrapMenuItem>
                <dx:BootstrapMenuItem Text="Our Customers">
                </dx:BootstrapMenuItem>
            </Items>
        </dx:BootstrapMenuItem>
        ...
    </Items>
</dx:BootstrapMenu>

Vertical Orientation

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

<dx:BootstrapMenu runat="server" Orientation="Vertical">
    <Items>
        ...
    </Items>
</dx:BootstrapMenu>

Item AutoWidth

To control how root menu item widths are calculated, use the ItemAutoWidth property. When this property is set to true, root items are automatically resized to fit the Menu control's width.

<dx:BootstrapMenu runat="server" ItemAutoWidth="true" ShowPopOutImages="true">
    <Items>
        ...
    </Items>
</dx:BootstrapMenu>

Item Selection

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

<dx:BootstrapMenu runat="server" AllowSelectItem="true">
    <Items>
        ...
    </Items>
</dx:BootstrapMenu>

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 setting the item’s GroupName property. 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.

<dx:BootstrapMenu runat="server">
    <Items>
        <dx:BootstrapMenuItem Text="Item 1" GroupName="Group1"></dx:BootstrapMenuItem>
        <dx:BootstrapMenuItem Text="Item With Subitems">
            <Items>
                <dx:BootstrapMenuItem Text="Sub Item 1" GroupName="SubItemGroup1" Checked="true">
                </dx:BootstrapMenuItem>
                <dx:BootstrapMenuItem Text="Sub Item 2" GroupName="SubItemGroup2">
                </dx:BootstrapMenuItem>
                <dx:BootstrapMenuItem Text="Sub Item 3" GroupName="SubItemGroup3">
                </dx:BootstrapMenuItem>
            </Items>
        </dx:BootstrapMenuItem>
        <dx:BootstrapMenuItem Text="Item 3" GroupName="Group3" Checked="true"></dx:BootstrapMenuItem>
        <dx:BootstrapMenuItem Text="Item 4" GroupName="Group4"></dx:BootstrapMenuItem>
    </Items>
</dx:BootstrapMenu>

Popup Menu

The Bootstrap Popup Menu control allows you to provide your web application with the context menu functionality. A popup menu can be associated with a specific control using the PopupElementCssSelector property. The menu is invoked automatically when a specific action (a left or right mouse click or mouse hovering) defined by the PopupAction property is performed within the associated control.

<div id="default-popup-menu" class="popup-target popup-target-sm menu"></div>
<dx:BootstrapPopupMenu runat="server" PopupElementCssSelector="#default-popup-menu">
    <Items>
        ...
    </Items>
</dx:BootstrapPopupMenu>

Auto Postback

The Auto Postback feature allows the Menu control to automatically initiate a postback when an end-user clicks a menu item, which enables you to process the item click on the server side by handling the ItemClick event. Set the AutoPostBack property to true to enable this feature.

<dx:BootstrapMenu runat="server" AutoPostBack="true" OnItemClick="MenuAutoPostBack_ItemClick">
    ...
</dx:BootstrapMenu>

Data Binding

The Menu control supports binding to a data source, which can be any object that implements the IHierarchicalEnumerable or IHierarchicalDataSource interface (e.g., SiteMapDataSource, XmlDataSource, etc.). Set the Menu control’s DataSourceID property to assign a data source to a menu.

A data-bound Menu control automatically creates a menu item for each data item. A created menu item obtains values for its properties from data item attributes with matching names. You can also explicitly specify mappings between menu item properties and data item attributes using the following properties.

  • IconCssClassField – Specifies the name of a data field providing CSS classes of icons displayed within menu items.
  • NameField – Specifies the name of a data field providing unique identifiers to menu items.
  • NavigateUrlField - Specifies the name of a data field providing menu item navigation locations.
  • TextField - Specifies the name of a data field providing menu item display texts.
  • ToolTipField - Specifies the name of a data field providing menu item tooltip texts.

Client-Side Events

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.

Trace Events:
<dx:BootstrapMenu runat="server">
    <ClientSideEvents
        PopUp="onPopUp"
        CloseUp="onCloseUp"
        ItemMouseOver="onItemMouseOver"
        ItemMouseOut="onItemMouseOut"
        ItemClick="onItemClick"
        Init="onInit" />
    <Items>
        ...
    </Items>
</dx:BootstrapMenu>
Screen Size
Color Themes
Demo QR Code