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.
