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.

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 all data source items follow the Default Item Template pattern. This provides a default item appearance, which can be customized later.

See Also