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. The ShowPopoutImages property enables the pop-out images, which indicate whether a menu item has child items.

<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.

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

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

<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. Also you can set the GroupName 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 or server ItemClick event.

<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. To show the Popup Menu control near a specific HTML element on the client side, use the ShowAtElement or ShowAtElementByID method.

<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>

Badges

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 BootstrapMenuItem.Badge property does not affect templated menu items.

<dx:BootstrapMenu runat="server">
    <Items>
        <dx:BootstrapMenuItem Text="Inbox">
            <Badge Text="10" />
        </dx:BootstrapMenuItem>
        <dx:BootstrapMenuItem Text="Sent Items" />
        <dx:BootstrapMenuItem Text="Drafts">
            <Badge Text="1" />
        </dx:BootstrapMenuItem>
        <dx:BootstrapMenuItem Text="Spam">
            <Badge Text="3" />
        </dx:BootstrapMenuItem>
    </Items>
    <ClientSideEvents ItemClick="onItemWithBadgeClick" />
</dx:BootstrapMenu>

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.

You can modify settings of each auto-created Item object during data binding in the ItemDataBound event.

Templates

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 properties to specify templates.

BootstrapMenu properties:

  • ItemTemplate – Specifies a common template used for displaying the content of all items within the current menu control.
  • RootItemTemplate – Specifies a common template used for displaying the content of root items within the current menu control.
  • ItemTextTemplate – Specifies a common template used for displaying the text content of all items within the current menu control.
  • RootItemTextTemplate – Specifies a common template used for displaying the text content of root items within the current menu control.
  • SubMenuTemplate – Specifies a common template used for displaying the content of all submenus within the current menu control.

BootstrapMenuItem properties:

  • Template – Specifies a template used for displaying the content of the current item.
  • TextTemplate – Specifies a template used for displaying the text content of the current item.
  • SubMenuTemplate – Specifies a template used for displaying the content of the submenu of the current item.
<dx:BootstrapMenu runat="server">
    <ItemTextTemplate>
        <span class="badge pull-right">1</span>
    </ItemTextTemplate>
    <SubMenuTemplate>
        <div class="media">
            <h4 class="media-heading"><%# Container.Item.Text %></h4>
            <hr />
            <div class="media-left">
                <span class="fa fa-bell-o text-info"></span>
            </div>
            <div class="media-body media-middle">
                <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>
    </SubMenuTemplate>
    <Items>
        ...
    </Items>
</dx:BootstrapMenu>

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.

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

  • ItemClick – Fires when an end-user clicks a menu item.
  • ItemMouseOver - Fires when the mouse cursor moves onto a menu item.
  • ItemMouseOut - Fires when the mouse cursor moves outside a menu item.
  • PopUp – Fires for a menu item when it displays a drop-down menu.
  • CloseUp - Fires for a menu item when its drop-down menu is closed.
Trace Events:
<dx:BootstrapMenu runat="server">
    <ClientSideEvents
        PopUp="onPopUp"
        CloseUp="onCloseUp"
        ItemMouseOver="onItemMouseOver"
        ItemMouseOut="onItemMouseOut"
        ItemClick="onItemClick"
        Init="onInit" />
    <Items>
        ...
    </Items>
</dx:BootstrapMenu>

Client-Side Functionality

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

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

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

BootstrapClientMenu methods:

BootstrapClientMenuItem methods:

<dx:BootstrapMenu ClientInstanceName="menu" AllowSelectItem="true" runat="server">
    <Items>
        ...
    </Items>
</dx:BootstrapMenu>
Screen Size
Color Themes
Demo QR Code