DevExtreme Angular - 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.

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