DevExtreme jQuery - Overview
The NavBar is a widget that navigates the application views.
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 all data source items follow the Default Item Template pattern. This provides a default item appearance, which can be customized later.
See Also
- Configure a Widget: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- NavBar - Customize Item Appearance
- NavBar - Items Selection
- NavBar API Reference
Feedback