DevExtreme React - Group Menu Items

If you need to group menu items, group them in the data source as shown in the following code. The key property gives names to groups; the items property specifies menu items included in the group.

JavaScript
var groupedMenuItems = [{
    key: "Main",
    items: ["Home", "Messages", "Favorites"]
}, {
    key: "Media",
    items: ["Music", "Photos", "Downloads"]
}];

To let the widget know that data it works with is grouped, assign true to the menuGrouped option.

JavaScript
$(function () {
    $("#slideOutContainer").dxSlideOut({
        dataSource: groupedMenuItems,
        menuGrouped: true,
        onItemClick: function (e) {
            e.component.hideMenu();
        }
    });
});

In some cases, you may need to define a custom template for group headers, for example, when the field providing group names differs from key, or if group headers need some customizations. To do this, use the menuGroupTemplate callback function as shown in the following code.

JavaScript
var groupedMenuItems = [{
    groupName: "Main",
    items: ["Home", "Messages", "Favorites"]
}, {
    groupName: "Media",
    items: ["Music", "Photos", "Downloads"]
}];

$(function () {
    $("#slideOutContainer").dxSlideOut({
        dataSource: groupedMenuItems,
        menuGrouped: true,
        menuGroupTemplate: function (groupData, groupIndex, groupElement) {
            groupElement.append("<p>" + groupData.groupName + "</p>");
        },
        onItemClick: function (e) {
            e.component.hideMenu();
        }
    });
});
NOTE
In AngularJS and Knockout apps, you can use DevExtreme's own markup component called dxTemplate. For more information, see the Custom Templates topic.
See Also