DevExtreme React - Items Selection

An end user can select NavBar items in two different modes: 'single' (by default) or 'multiple'. You can use the selectionMode option to change the mode.

JavaScript
$(function() {
    $("#navBarContainer").dxNavBar({
        items: navBarItems,
        selectionMode: "multiple"
    });
});

If you need an item to be preselected, pass its index in the data source array to the selectedIndex option.

JavaScript
var navBarItems = [
    { text: "User", icon: "user" },
    { text: "Find", icon: "find" },
    { text: "Favorites", icon: "favorites" }
];

$(function() {
    $("#navBarContainer").dxNavBar({
        items: navBarItems,
        selectedIndex: 1,
        maxIndex: 2
    });
});

As an alternative, you can use the selectedItem (for "single" selectionMode) or selectedItems (for "multiple" selectionMode) options.

JavaScript
var navBarItems = [
    { text: "User", icon: "user" },
    { text: "Find", icon: "find" },
    { text: "Favorites", icon: "favorites" },
    { text: "About", icon: "info" },
    { text: "Home", icon: "home" },
    { text: "URI", icon: "tips" }
];

$(function() {
    $("#navBarContainer").dxNavBar({
        items: navBarItems,
        maxIndex: 5
        selectedItem: navBarItems[3],
        // ---------- or ----------
        selectionMode: 'multiple',
        selectedItems: [ navBarItems[3], navBarItems[4] ]
    });
});
See Also