Bootstrap Menu Demo | DevExpress Bootstrap Controls for ASP.NET Core

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 argument. 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 => {
        items.Add().Text("Item 1")
            .Items(subItems => {
                subItems.Add()
                .Text("SubItem 1")
                .Items(innerItems =>
                    innerItems.Add().Text("SubItem 4")
                );
                subItems.Add()
                    .Text("SubItem 2")
                    .BeginGroup(true);
                subItems.Add().Text("SubItem 3");
            });
        items.Add().Text("Item 2");
        items.Add().Text("Item 3");
    })
)

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 => {
        items.Add().Text("Item 1")
            .Items(subItems => {
                subItems.Add()
                    .Text("SubItem 1")
                    .Items(innerItems =>
                        innerItems
                            .Add()
                            .Text("SubItem 4")
                    );
                subItems.Add()
                    .Text("SubItem 2")
                    .BeginGroup(true);
                subItems.Add().Text("SubItem 3");
            });
        items.Add().Text("Item 2");
        items.Add().Text("Item 3");
    }))

Item Selection

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

SelectedItem - Specifies the selected item.

Client menu control's methods:

BootstrapMenu.setSelectedItem - Selects the specified menu item.
BootstrapMenu.getSelectedItem - Returns the selected menu item.

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 => {
        items.Add()
            .Text("Item 1")
            .Selected(true);
        items.Add().Text("Item 2");
        items.Add().Text("Item 3");
        items.Add()
            .Text("Item 4")
            .Items(subItems => {
                subItems.Add().Text("Sub Item 1");
                subItems.Add().Text("Sub Item 2");
            });
    }))

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.

BootstrapMenuItem.getChecked / BootstrapMenuItem.setChecked - Gets/sets the item's checked state on the client-side.

@(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");
    }))

Popup Menu

Use the Popup Menu to implement context menu functionality in your web applications.

The following methods allow you to configure the control:

PopupElementCssSelector - Associates the popup menu with HTML elements based on a CSS selector.
Top and Left - Allow you to show the popup menu at predefined coordinates instead of specifying an associated element. Use these methods to set menu's left side and top side coordinates respectively.
PopupAction - Specifies an action that invokes the popup menu (a left/right mouse click or mouse hovering).
CloseAction - Specifies an action that closes the popup menu (clicking or moving the mouse cursor outside the menu).
PopupHorizontalAlign and PopupVerticalAlign - Specify the popup menu's alignment relative to the associated element. The popup menu appears at the mouse cursor by default.

Client-side methods:

Show and Hide - Allow you to show and hide the popup menu programmatically.
ShowAtElement and ShowAtElementByID - Show the popup menu for a specific element.
ShowAtPos - Shows the popup menu above at the specified position..

<div id="default-popup-menu" class="popup-target popup-target-sm menu"></div>
@(Html.DevExpress()
   .BootstrapPopupMenu("defaultPopupMenu")
   .PopupElementCssSelector("#default-popup-menu")
   .Items(items => {
       items.Add().Text("Copy").IconCssClass("fa fa-copy");
       items.Add().Text("Cut").IconCssClass("fa fa-cut");
       items.Add().Text("Paste").IconCssClass("fa fa-paste");
       items.Add().Text("Select All").BeginGroup(true);
   }))

NavBar Mode

Call the NavBarMode method (available through SettingsBootstrap) with the true argument if you want to display the Bootstrap Menu control using the Bootstrap framework’s NavBar component. In this mode, the menu has background and changes the layout to a vertical drop-down menu on small screen resolutions (the menu displays its submenus as embedded blocks in this case).

<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">
        @(Html.DevExpress()
            .BootstrapMenu("menuNavBarMode")
            .SettingsBootstrap(settings => settings.NavbarMode(true))
            .CssClasses(cssClasses => cssClasses.Control("ml-auto"))
            .ShowPopOutImages(true)
            .Items(items => {
                items.Add().Text("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");
                    });
            }))
    </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:

A menu item's Badge method allows you to specify item badge settings.

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

BootstrapMenuItem.getBadgeText - Gets the text of the item badge.
BootstrapMenuItem.setBadgeText - Sets the text of the item badge.
BootstrapMenuItem.getBadgeIconCssClass - Gets the icon CSS class of the item badge.
BootstrapMenuItem.setBadgeIconCssClass - Sets the icon CSS class of the item badge.

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(args) {
    if(args.item.getBadgeText())
        args.item.setBadgeText("");
}

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

Menu methods:

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.

Menu item methods:

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.

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.

@(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>)
    .Items(items =>
    {
        items.Add().Text("My Blog").IconCssClass("fa fa-3x fa-home");
        items.Add().Text("Posts").IconCssClass("fa fa-3x fa-pencil");
        items.Add().Text("Comments").IconCssClass("fa fa-3x fa-comments");
    })
)

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

PopUp

CloseUp

ItemMouseOver

ItemMouseOut

<script type="text/javascript">
    function onPopUp(args) {
        dxbsDemo.eventMonitor.trace(this, args, 'PopUp');
    }
    function onCloseUp(args) {
        dxbsDemo.eventMonitor.trace(this, args, 'CloseUp');
    }
    function onItemMouseOver(args) {
        dxbsDemo.eventMonitor.trace(this, args, 'ItemMouseOver');
    }
    function onItemMouseOut(args) {
        dxbsDemo.eventMonitor.trace(this, args, 'ItemMouseOut');
    }
    function onItemClick(args) {
        dxbsDemo.eventMonitor.trace(this, args, 'ItemClick');
    }
    function onInit(args) {
        dxbsDemo.eventMonitor.trace(this, args, '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 => {
        items.Add().Text("Item 1")
            .Items(subItems => {
                subItems.Add()
                    .Text("SubItem 1")
                    .Items(innerItems =>
                        innerItems.Add()
                            .Text("SubItem 4")
                    );
                subItems.Add()
                    .Text("SubItem 2")
                    .BeginGroup(true);
                subItems.Add().Text("SubItem 3");
            });
        items.Add().Text("Item 2");
        items.Add().Text("Item 3");
    }))

Client-Side Functionality

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

BootstrapMenu methods:

getItem - Returns a menu item specified by its index.
getSelectedItem / setSelectedItem – Gets/sets the selected item.
getVisible / setVisible – Gets/sets the control’s visibility.

BootstrapMenuItem methods:

getItem – Returns a subitem specified by its index.
setEnabled / getEnabled – Gets/sets the enabled state of the menu item.
setIconCssClass / getIconCssClass – Gets/sets the CSS class of the icon displayed by the menu item.
setText / getText – Gets/sets the text displayed by the menu item.
setVisible / getVisible – Gets/sets the menu item's visibility.

@(Html.DevExpress()
    .BootstrapMenu("menuControl")
    .EnableClientSideAPI(true)
    .AllowSelectItem(true)
    .Items(items => {
        items.Add().Text("Item 1");
        items.Add().Text("Item 2");
        items.Add().Text("Item 3").IconCssClass("fa fa-fa");
        items.Add().Text("Item 4");
        items.Add().Text("Item 5");
    })
)

Bootstrap Controls for ASP.NET Core are in maintenance mode.