Unbound Mode

• Aug 01, 2019

In an Unbound Mode, the Menu is not bound to any data source and can be populated manually. To create nodes, use the MVCxMenuItemCollection.Add methods.

View code (ASPX):

C#

<%
    Html.DevExpress().Menu(
        settings => {
            settings.Name = "MyMenu";
            settings.ShowPopOutImages = DefaultBoolean.True;
            settings.Items.Add("Home", "HomePage", "~/Content/Images/Home.png", "http://www.devexpress.com/");
            settings.Items.Add(
                item => {
                    item.Text = "News";
                    item.Name = "NewsPage";
                    item.Image.Url = "~/Content/Images/News.png";
                    item.NavigateUrl = "http://www.devexpress.com/Home/Announces/index.xml";
                    item.Items.Add("Subscriptions", "SubscriptionsPage", "~/Content/Images/Subscriptions.png", "http://www.devexpress.com/Subscriptions/DXperience/info.xml");
                });
            settings.Items.Add(
                item => {
                    item.Text = "Products";
                    item.Name = "ProductsPage";
                    item.Image.Url = "~/Content/Images/Products.png";
                    item.NavigateUrl = "http://www.devexpress.com/Products/Products.xml";
                    item.Items.Add("Downloads", "DownloadsPage", "~/Content/Images/Downloads.png", "https://www.devexpress.com/ClientCenter/Downloads/");
                    item.Items.Add("Support", "SupportPage", "~/Content/Images/Support.png", "http://www.devexpress.com/Support/");
                });
        })
         .Render();
    %>

View code (Razor):

C#

@Html.DevExpress().Menu(
    settings => {
        settings.Name = "MyMenu";
        settings.ShowPopOutImages = DefaultBoolean.True;
        settings.Items.Add("Home", "HomePage", "~/Content/Images/Home.png", "http://www.devexpress.com/");
        settings.Items.Add(
            item => {
                item.Text = "News";
                item.Name = "NewsPage";
                item.Image.Url = "~/Content/Images/News.png";
                item.NavigateUrl = "http://www.devexpress.com/Home/Announces/index.xml";
                item.Items.Add("Subscriptions", "SubscriptionsPage", "~/Content/Images/Subscriptions.png", "http://www.devexpress.com/Subscriptions/DXperience/info.xml");
            });
        settings.Items.Add(
            item => {
                item.Text = "Products";
                item.Name = "ProductsPage";
                item.Image.Url = "~/Content/Images/Products.png";
                item.NavigateUrl = "http://www.devexpress.com/Products/Products.xml";
                item.Items.Add("Downloads", "DownloadsPage", "~/Content/Images/Downloads.png", "https://www.devexpress.com/ClientCenter/Downloads/");
                item.Items.Add("Support", "SupportPage", "~/Content/Images/Support.png", "http://www.devexpress.com/Support/");
            });
    }).GetHtml()

The image below illustrates the result.