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.

jQuery
JavaScript
$(function() {
    $("#navBarContainer").dxNavBar({
        items: navBarItems,
        selectionMode: "multiple"
    });
});
Angular
HTML
TypeScript
<dx-nav-bar ...
    selectionMode="multiple">
    <dxi-item text="User" icon="user"></dxi-item>
    <!-- ... -->
</dx-nav-bar>
import { DxNavBarModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxNavBarModule
    ],
    // ...
})

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

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

$(function() {
    $("#navBarContainer").dxNavBar({
        items: navBarItems,
        selectedIndex: 1
    });
});
Angular
HTML
TypeScript
<dx-nav-bar [selectedIndex]="1">
    <dxi-item text="User" icon="user"></dxi-item>
    <dxi-item text="Find" icon="find"></dxi-item>
    <dxi-item text="Favorites" icon="favorites"></dxi-item>
</dx-nav-bar>
import { DxNavBarModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxNavBarModule
    ],
    // ...
})

As an alternative, you can use the selectedItem (for "single" selectionMode) or selectedItems (for "multiple" selectionMode) options. This approach is suitable if the NavBar items are specified using an array rather than the dxItem markup component.

jQuery
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,
        selectedItem: navBarItems[3],
        // ========== or ==========
        selectionMode: 'multiple',
        selectedItems: [ navBarItems[3], navBarItems[4] ]
    });
});
Angular
HTML
TypeScript
<dx-nav-bar
    [items]="navBarItems"
    [selectedItem]="navBarItems[3]">
    <!-- ========== or ========== 
    selectionMode="multiple"
    [selectedItems]="[ navBarItems[3], navBarItems[4] ]"> -->
</dx-nav-bar>
import { DxNavBarModule } from "devextreme-angular";
// ...
export class AppComponent {
    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" }
    ];
}
@NgModule({
    imports: [
        // ...
        DxNavBarModule
    ],
    // ...
})
See Also