DevExtreme Vue - 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