Unbound Mode

In an Unbound Mode, NavBar is not bound to any data source and can be populated manually.

To create groups, use the MVCxNavBarGroupCollection.Add method. To create items within a group, use the MVCxNavBarItemCollection.Add method.

The example below demonstrates how to create a simple NavBar in unbound mode.

View code (ASPX):

<%
Html.DevExpress().NavBar(
     settings => {
          settings.Name = "MyNavBar";
          settings.Groups.Add("Home","HomePage","~/Content/Images/Home.png");
          settings.Groups.Add(
               group => {
                    group.Text = "News";
                    group.HeaderImage.Url = "~/Content/Images/News.png";
                    group.Items.Add("Subscriptions","SubscriptionsPage","~/Content/Images/Subscriptions.png");
               }); 
          settings.Groups.Add(
               group => {
                    group.Text = "Products";
                    group.HeaderImage.Url = "~/Content/Images/Products.png";
                    group.Items.Add("Downloads","DownloadsPage","~/Content/Images/Downloads.png");
                    group.Items.Add("Support","SupportPage","~/Content/Images/Support.png");
                    group.Items.Add("Order","OrderPage","~/Content/Images/Order.png");                                 
               });          
          settings.Groups.Add("Client Center","ClientPage","~/Content/Images/Client Center.png");            
          })
     .Render();
%>

View code (Razor):

@Html.DevExpress().NavBar(
    settings => {
        settings.Name = "MyNavBar";
        settings.Groups.Add("Home","HomePage","~/Content/Images/Home.png");
        settings.Groups.Add(
            group => {
                group.Text = "News";
                group.HeaderImage.Url = "~/Content/Images/News.png";
                group.Items.Add("Subscriptions","SubscriptionsPage","~/Content/Images/Subscriptions.png");
            }); 
        settings.Groups.Add(
            group => {
                group.Text = "Products";
                group.HeaderImage.Url = "~/Content/Images/Products.png";
                group.Items.Add("Downloads","DownloadsPage","~/Content/Images/Downloads.png");
                group.Items.Add("Support","SupportPage","~/Content/Images/Support.png");
                group.Items.Add("Order","OrderPage","~/Content/Images/Order.png")
            });          
        settings.Groups.Add("Client Center","ClientPage","~/Content/Images/Client Center.png");            
    }).GetHtml()

The image below illustrates the result.

NavBar_Unbound