Bootstrap Menu Demo | DevExpress Bootstrap Controls for ASP.NET

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.

ASPX Copy

<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>
        <dx:BootstrapMenuItem Text="Products">
            <Items>
                <dx:BootstrapMenuItem Text="Subscriptions / Packs">
                </dx:BootstrapMenuItem>
                <dx:BootstrapMenuItem Text=".NET Windows Forms Components">
                </dx:BootstrapMenuItem>
                <dx:BootstrapMenuItem Text="Reporting / Printing Suites">
                </dx:BootstrapMenuItem>
                <dx:BootstrapMenuItem Text="VCL Components and Tools">
                </dx:BootstrapMenuItem>
                <dx:BootstrapMenuItem Text="ASP.NET Components">
                </dx:BootstrapMenuItem>
            </Items>
        </dx:BootstrapMenuItem>
        <dx:BootstrapMenuItem Text="Support">
            <Items>
                <dx:BootstrapMenuItem Text="Knowledge Base">
                </dx:BootstrapMenuItem>
                <dx:BootstrapMenuItem Text="Documentation">
                </dx:BootstrapMenuItem>
                <dx:BootstrapMenuItem Text="Support Center">
                </dx:BootstrapMenuItem>
                <dx:BootstrapMenuItem Text="Newsgroups">
                </dx:BootstrapMenuItem>
                <dx:BootstrapMenuItem Text="Best Practicies">
                </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.

ASPX Copy

<dx:BootstrapMenu runat="server" Orientation="Vertical">
    <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>
        <dx:BootstrapMenuItem Text="Products">
            <Items>
                <dx:BootstrapMenuItem Text="Subscriptions / Packs">
                </dx:BootstrapMenuItem>
                <dx:BootstrapMenuItem Text=".NET Windows Forms Components">
                </dx:BootstrapMenuItem>
                <dx:BootstrapMenuItem Text="Reporting / Printing Suites">
                </dx:BootstrapMenuItem>
                <dx:BootstrapMenuItem Text="VCL Components and Tools">
                </dx:BootstrapMenuItem>
                <dx:BootstrapMenuItem Text="ASP.NET Components">
                </dx:BootstrapMenuItem>
            </Items>
        </dx:BootstrapMenuItem>
        <dx:BootstrapMenuItem Text="Support">
            <Items>
                <dx:BootstrapMenuItem Text="Knowledge Base">
                </dx:BootstrapMenuItem>
                <dx:BootstrapMenuItem Text="Documentation">
                </dx:BootstrapMenuItem>
                <dx:BootstrapMenuItem Text="Support Center">
                </dx:BootstrapMenuItem>
                <dx:BootstrapMenuItem Text="Newsgroups">
                </dx:BootstrapMenuItem>
                <dx:BootstrapMenuItem Text="Best Practicies">
                </dx:BootstrapMenuItem>
            </Items>
        </dx:BootstrapMenuItem>
    </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.

ASPX Copy

<dx:BootstrapMenu runat="server" ItemAutoWidth="true" 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>
        <dx:BootstrapMenuItem Text="Products">
            <Items>
                <dx:BootstrapMenuItem Text="Subscriptions / Packs">
                </dx:BootstrapMenuItem>
                <dx:BootstrapMenuItem Text=".NET Windows Forms Components">
                </dx:BootstrapMenuItem>
                <dx:BootstrapMenuItem Text="Reporting / Printing Suites">
                </dx:BootstrapMenuItem>
                <dx:BootstrapMenuItem Text="VCL Components and Tools">
                </dx:BootstrapMenuItem>
                <dx:BootstrapMenuItem Text="ASP.NET Components">
                </dx:BootstrapMenuItem>
            </Items>
        </dx:BootstrapMenuItem>
        <dx:BootstrapMenuItem Text="Support">
            <Items>
                <dx:BootstrapMenuItem Text="Knowledge Base">
                </dx:BootstrapMenuItem>
                <dx:BootstrapMenuItem Text="Documentation">
                </dx:BootstrapMenuItem>
                <dx:BootstrapMenuItem Text="Support Center">
                </dx:BootstrapMenuItem>
                <dx:BootstrapMenuItem Text="Newsgroups">
                </dx:BootstrapMenuItem>
                <dx:BootstrapMenuItem Text="Best Practicies">
                </dx:BootstrapMenuItem>
            </Items>
        </dx:BootstrapMenuItem>
    </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.

Menu.SelectedItem - gets or sets the selected item
ClientMenu.SetSelectedNode - selects the specified menu item
ClientMenu.GetSelectedNode - returns the selected menu item

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

ASPX Copy

<dx:BootstrapMenu runat="server" AllowSelectItem="true">
    <Items>
        <dx:BootstrapMenuItem Text="Item 1" Selected="true"></dx:BootstrapMenuItem>
        <dx:BootstrapMenuItem Text="Item 2"></dx:BootstrapMenuItem>
        <dx:BootstrapMenuItem Text="Item 3"></dx:BootstrapMenuItem>
        <dx:BootstrapMenuItem Text="Item 4">
            <Items>
                <dx:BootstrapMenuItem Text="Sub Item 1">
                </dx:BootstrapMenuItem>
                <dx:BootstrapMenuItem Text="Sub Item 2">
                </dx:BootstrapMenuItem>
            </Items>
        </dx:BootstrapMenuItem>
    </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.

Item.Checked - specifies the item's checked state
ClientItem.GetChecked / ClientItem.SetChecked - gets/sets the item's checked state on the client-side

ASPX Copy

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

ASPX Copy

<div id="default-popup-menu" class="popup-target popup-target-sm menu"></div>
<dx:BootstrapPopupMenu runat="server" PopupElementCssSelector="#default-popup-menu">
    <Items>
        <dx:BootstrapMenuItem Text="Copy" IconCssClass="fa fa-copy">
        </dx:BootstrapMenuItem>
        <dx:BootstrapMenuItem Text="Cut" IconCssClass="fa fa-cut">
        </dx:BootstrapMenuItem>
        <dx:BootstrapMenuItem Text="Paste" IconCssClass="fa fa-paste">
        </dx:BootstrapMenuItem>
        <dx:BootstrapMenuItem Text="Select All" BeginGroup="true">
        </dx:BootstrapMenuItem>
    </Items>
</dx:BootstrapPopupMenu>

NavBar Mode

Enable the SettingsBootstrap.NavBarMode option if you want to display the BootstrapMenu control using the Bootstrap framework's NavBar component. In this mode, the menu has background and changes the layout to a vertical dropdown menu on small screen resolutions (the menu displays its submenus as embedded blocks in this case).

ASPX Copy

<nav class="navbar navbar-expand-lg navbar-dark bg-primary text-white">
    <a class="navbar-brand" href="#" >Menu Demo</a>
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target=".menuContainer">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse menuContainer">
        <dx:BootstrapMenu runat="server" ShowPopOutImages="True">
            <CssClasses Control="ml-auto" />
            <SettingsBootstrap NavbarMode="true" ></SettingsBootstrap>
            <Items>
                <dx:BootstrapMenuItem Text="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">
                        </dx:BootstrapMenuItem>
                        <dx:BootstrapMenuItem Text="Our Customers">
                        </dx:BootstrapMenuItem>
                    </Items>
                </dx:BootstrapMenuItem>
                <dx:BootstrapMenuItem Text="Products">
                    <Items>
                        <dx:BootstrapMenuItem Text="Subscriptions / Packs">
                        </dx:BootstrapMenuItem>
                        <dx:BootstrapMenuItem Text=".NET Windows Forms Components">
                        </dx:BootstrapMenuItem>
                        <dx:BootstrapMenuItem Text="Reporting / Printing Suites">
                        </dx:BootstrapMenuItem>
                        <dx:BootstrapMenuItem Text="VCL Components and Tools">
                        </dx:BootstrapMenuItem>
                        <dx:BootstrapMenuItem Text="ASP.NET Components">
                        </dx:BootstrapMenuItem>
                    </Items>
                </dx:BootstrapMenuItem>
                <dx:BootstrapMenuItem Text="Support">
                    <Items>
                        <dx:BootstrapMenuItem Text="Knowledge Base">
                        </dx:BootstrapMenuItem>
                        <dx:BootstrapMenuItem Text="Documentation">
                        </dx:BootstrapMenuItem>
                        <dx:BootstrapMenuItem Text="Support Center">
                        </dx:BootstrapMenuItem>
                        <dx:BootstrapMenuItem Text="Newsgroups">
                        </dx:BootstrapMenuItem>
                        <dx:BootstrapMenuItem Text="Best Practicies">
                        </dx:BootstrapMenuItem>
                    </Items>
                </dx:BootstrapMenuItem>
            </Items>
        </dx:BootstrapMenu>
    </div>
</nav>

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:

BootstrapMenuItem.Badge - Gets or sets the item badge on the server.

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

BootstrapClientMenuItem.GetBadgeText - Gets the text of the item badge.
BootstrapClientMenuItem.SetBadgeText - Sets the text of the item badge.
BootstrapClientMenuItem.GetBadgeIconCssClass - Gets the icon CSS class of the item badge.
BootstrapClientMenuItem.SetBadgeIconCssClass - Sets the icon CSS class of the item badge.

Note that the BootstrapMenuItem.Badge property does not affect templated menu items.

ASPX JS Copy

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

function onItemWithBadgeClick(s, e) {
    if(e.item.GetBadgeText())
        e.item.SetBadgeText("");
}

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.

ASPX C#Copy

<dx:BootstrapMenu runat="server" AutoPostBack="true" OnItemClick="MenuAutoPostBack_ItemClick">
    <Items>
        <dx:BootstrapMenuItem Text="Item 1"></dx:BootstrapMenuItem>
        <dx:BootstrapMenuItem Text="Item 2"></dx:BootstrapMenuItem>
        <dx:BootstrapMenuItem Text="Item 3"></dx:BootstrapMenuItem>
    </Items>
</dx:BootstrapMenu>

protected void MenuAutoPostBack_ItemClick(object source, DevExpress.Web.Bootstrap.BootstrapMenuItemEventArgs e) {
    DemoUtils.ShowToast(AutoPostback, string.Format("The '{0}' item has been clicked.", e.Item.Text));
}

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.

ASPX Copy

<dx:BootstrapMenu runat="server" DataSourceID="MenuDataSource" TextField="Title" Orientation="Vertical">
</dx:BootstrapMenu>
<asp:XmlDataSource ID="MenuDataSource" runat="server" DataFile="~/App_Data/HelpNav.xml" XPath="/namespace/*"></asp:XmlDataSource>

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.

1

My Blog

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sem lorem, rutrum at tincidunt aliquam, vulputate sit amet tellus.
1

Posts

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sem lorem, rutrum at tincidunt aliquam, vulputate sit amet tellus.
1

Comments

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sem lorem, rutrum at tincidunt aliquam, vulputate sit amet tellus.

ASPX Copy

<dx:BootstrapMenu runat="server">
    <ItemTextTemplate>
        <span class="badge pull-right">1</span>
    </ItemTextTemplate>
    <SubMenuTemplate>
        <h4 class="mt-0"><%# Container.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>
    </SubMenuTemplate>
    <Items>
        <dx:BootstrapMenuItem Text="My Blog" IconCssClass="fa fa-3x fa-home" />
        <dx:BootstrapMenuItem Text="Posts" IconCssClass="fa fa-3x fa-pencil-alt" />
        <dx:BootstrapMenuItem Text="Comments" IconCssClass="fa fa-3x fa-comments" />
    </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:

Init

ItemClick

ItemMouseOver

ItemMouseOut

PopUp

CloseUp

ASPX JS Copy

<dx:BootstrapMenu runat="server">
    <ClientSideEvents
        PopUp="onPopUp"
        CloseUp="onCloseUp"
        ItemMouseOver="onItemMouseOver"
        ItemMouseOut="onItemMouseOut"
        ItemClick="onItemClick"
        Init="onInit" />
    <Items>
        <dx:BootstrapMenuItem Text="Item 1">
            <Items>
                <dx:BootstrapMenuItem Text="SubItem 1">
                    <Items>
                        <dx:BootstrapMenuItem Text="SubItem 4"></dx:BootstrapMenuItem>
                    </Items>
                </dx:BootstrapMenuItem>
                <dx:BootstrapMenuItem Text="SubItem 2"></dx:BootstrapMenuItem>
                <dx:BootstrapMenuItem Text="SubItem 3"></dx:BootstrapMenuItem>
            </Items>
        </dx:BootstrapMenuItem>
        <dx:BootstrapMenuItem Text="Item 2"></dx:BootstrapMenuItem>
        <dx:BootstrapMenuItem Text="Item 3"></dx:BootstrapMenuItem>
    </Items>
</dx:BootstrapMenu>

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');
}

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.

ASPX Copy

<dx:BootstrapMenu ClientInstanceName="menu" AllowSelectItem="true" runat="server">
    <Items>
        <dx:BootstrapMenuItem Text="Item 1"></dx:BootstrapMenuItem>
        <dx:BootstrapMenuItem Text="Item 2"></dx:BootstrapMenuItem>
        <dx:BootstrapMenuItem Text="Item 3" IconCssClass="fa fa-cogs"></dx:BootstrapMenuItem>
        <dx:BootstrapMenuItem Text="Item 4"></dx:BootstrapMenuItem>
        <dx:BootstrapMenuItem Text="Item 5"></dx:BootstrapMenuItem>
    </Items>
</dx:BootstrapMenu>

Default Menu

Vertical Orientation

Item AutoWidth

Item Selection

Item Checking

Popup Menu

NavBar Mode

Badges

Auto Postback

Data Binding

Templates

Client-Side Events

Trace Events:

Client-Side Functionality

Screen Size

Color Themes

Demo QR Code