A widget that contains items used to navigate through application views.

Type: Object

This widget displays navigation items that perform an action when clicked. The navbar items are loaded from an array specified by the dataSource configuration option. You can specify an array of objects as the widget data source.

var navItems = [
        { text: "user", icon: "user" },
        { text: "find", icon: "find" },
        { text: "favorites", icon: "favorites" },
        { text: "about", icon: "info" },
        { text: "home", icon: "home" },
        { text: "URI", icon: "tips" }

You can specify the dxNavBar item icon from the icon field (see the example above) or the iconSrc field, as shown in the following example.

var navItems = [
        { text: "user", iconSrc: "images/icons/user.png" },
        { text: "find", iconSrc: "images/icons/find.png" },

Declare a function that processes a navbar item click, and assign it to the itemClickAction configuration option.

var navItemClicked = function(e){
    alert(e.itemData.text + "navigation item clicked");

Note that you can access the clicked item fields via the itemData field of the object passed as an argument to the itemClickAction function.

To create the dxNavBar widget, add a div element with dxNavBar Knockout binding within the body of the required view.

<div id="navBarContainer" data-bind="dxNavBar:{dataSource: navItems, itemClickAction: navItemClicked}"></div>

Refer to the Add a widget documentation section to learn how to create widgets in detail.

Show Example:


An object defining configuration options for the dxNavBar widget.


This section describes members used to manipulate the object.