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.
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.
$(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.
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(); } }); });
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.