Navigation and Layout - NavBar Overview

  • Charts
About the NavBar

The DevExpress ASP.NET MVC NavBar extension is a navigation component that allows you to display a number of items arranged into different collapsible groups.

To add a NavBar with a group containing multiple items to your web application, add the NavBar extension to the View, add the required group, and add the required items to this group:

View code:

@Html.DevExpress().NavBar(settings => {
    settings.Name = "nbOverview";
    settings.Groups.Add(group => {
        group.Text = "Charts";
        group.Items.Add("Stacked Bar", "",
        group.Items.Add("3D Pie", "", "~/Images/Pie.png");
        group.Items.Add("Overlapped Gantt", "",

Key Features
  • Data Binding
    You can bind a NavBar to a data source so that your NavBar structure is retrieved from an XML file, a SiteMap or a hierarchical list.
  • AJAX Support
    NavBar supports AJAX technology by implementing the ability to load the content of a group from the server via a callback, when the group is expanded.
  • Template Technology
    Templates are fully supported. For each element within NavBar, you can customize the appearance or layout using any HTML content.
  • Rich Client-Side Functionality
    A comprehensive client-side API is available for NavBar. This functionality, coupled with the ability to handle events on the client side, gives you full control over the navbar behavior on the client side.
Version: v2017 vol 1.7
Copyright © 2006-2017 Developer Express Inc
Your Next Great MVC App Starts Here

Get started today and download your 30-day trial of DevExpress MVC Extensions (includes 30 days of free technical support).

All demos ship with full source code and are included in the DevExpress MVC distribution. Refer to the Demos and Sample Applications topic to learn more.

DevExpress MVC Extensions ship as part of DevExpress Universal, DXperience and ASP.NET Subscriptions and are backed by a 60 day unconditional money-back guarantee.
To learn more and obtain pricing information, visit the Compare Features and Pricing webpage. For immediate assistance, contact us by Email at or by phone at +1 (818) 844-3383 between 7:30am and 4:30pm Pacific Time.