All docs
V20.2
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.
A newer version of this page is available. Switch to the current version.

Overview

The NavBar is a UI component that navigates the application views.

View Demo

The following code adds the NavBar to your page. All navigation items have icons and one of them has a badge.

jQuery
HTML
JavaScript
<div id="navBarContainer"></div>
$(function() {
    $("#navBarContainer").dxNavBar({
        items: [
            { text: "User", icon: "user" },
            { text: "Find", icon: "find" },
            { text: "Favorites", icon: "favorites", badge: "New" },
            { text: "About", icon: "info" }
        ]
    });
});
Angular
HTML
TypeScript
<dx-nav-bar>
    <dxi-item text="User" icon="user"></dxi-item>
    <dxi-item text="Find" icon="find"></dxi-item>
    <dxi-item text="Favorites" icon="favorites" badge="New"></dxi-item>
    <dxi-item text="About" icon="info"></dxi-item>
</dx-nav-bar>
import { DxNavBarModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxNavBarModule
    ],
    // ...
})

Note that field names in these data source items are conventional. This provides a default item appearance, which can be customized later.

See Also