DevExtreme Vue - Overview

The NavBar is a widget 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