DevExtreme jQuery/JS - 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
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" }
  • ]
  • });
  • });

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

See Also