From ac18cfcc019072d450ce5b1b6a90dc9733e8f8d5 Mon Sep 17 00:00:00 2001
From: Ayush Shrivastava <ayushsh.3110@gmail.com>
Date: Fri, 7 Feb 2025 21:30:21 +0530
Subject: [PATCH] [Docs][Menus] Adding an example for Grouped Menu

---
 .../material/components/menus/GroupedMenu.js  | 49 +++++++++++++++++++
 .../material/components/menus/GroupedMenu.tsx | 49 +++++++++++++++++++
 docs/data/material/components/menus/menus.md  |  6 +++
 3 files changed, 104 insertions(+)
 create mode 100644 docs/data/material/components/menus/GroupedMenu.js
 create mode 100644 docs/data/material/components/menus/GroupedMenu.tsx

diff --git a/docs/data/material/components/menus/GroupedMenu.js b/docs/data/material/components/menus/GroupedMenu.js
new file mode 100644
index 00000000000000..cdef630c0c8f1d
--- /dev/null
+++ b/docs/data/material/components/menus/GroupedMenu.js
@@ -0,0 +1,49 @@
+import * as React from 'react';
+import Button from '@mui/material/Button';
+import ListSubheader from '@mui/material/ListSubheader';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import MenuList from '@mui/material/MenuList';
+
+export default function GroupedMenu() {
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const open = Boolean(anchorEl);
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <div>
+      <Button
+        id="basic-button"
+        aria-controls={open ? 'grouped-menu' : undefined}
+        aria-haspopup="true"
+        aria-expanded={open ? 'true' : undefined}
+        onClick={handleClick}
+      >
+        Dashboard
+      </Button>
+      <Menu
+        id="grouped-menu"
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        MenuListProps={{
+          'aria-labelledby': 'basic-button',
+        }}
+      >
+        <MenuList role="group">
+          <ListSubheader>Category 1</ListSubheader>
+          <MenuItem onClick={handleClose}>Option 1</MenuItem>
+          <MenuItem onClick={handleClose}>Option 2</MenuItem>
+          <ListSubheader>Category 2</ListSubheader>
+          <MenuItem onClick={handleClose}>Option 3</MenuItem>
+          <MenuItem onClick={handleClose}>Option 4</MenuItem>
+        </MenuList>
+      </Menu>
+    </div>
+  );
+}
diff --git a/docs/data/material/components/menus/GroupedMenu.tsx b/docs/data/material/components/menus/GroupedMenu.tsx
new file mode 100644
index 00000000000000..b60c4b7b663336
--- /dev/null
+++ b/docs/data/material/components/menus/GroupedMenu.tsx
@@ -0,0 +1,49 @@
+import * as React from 'react';
+import Button from '@mui/material/Button';
+import ListSubheader from '@mui/material/ListSubheader';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import MenuList from '@mui/material/MenuList';
+
+export default function GroupedMenu() {
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <div>
+      <Button
+        id="basic-button"
+        aria-controls={open ? 'grouped-menu' : undefined}
+        aria-haspopup="true"
+        aria-expanded={open ? 'true' : undefined}
+        onClick={handleClick}
+      >
+        Dashboard
+      </Button>
+      <Menu
+        id="grouped-menu"
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        MenuListProps={{
+          'aria-labelledby': 'basic-button',
+        }}
+      >
+        <MenuList role="group">
+          <ListSubheader>Category 1</ListSubheader>
+          <MenuItem onClick={handleClose}>Option 1</MenuItem>
+          <MenuItem onClick={handleClose}>Option 2</MenuItem>
+          <ListSubheader>Category 2</ListSubheader>
+          <MenuItem onClick={handleClose}>Option 3</MenuItem>
+          <MenuItem onClick={handleClose}>Option 4</MenuItem>
+        </MenuList>
+      </Menu>
+    </div>
+  );
+}
diff --git a/docs/data/material/components/menus/menus.md b/docs/data/material/components/menus/menus.md
index 0794be30c28999..d0ee40788b332f 100644
--- a/docs/data/material/components/menus/menus.md
+++ b/docs/data/material/components/menus/menus.md
@@ -113,6 +113,12 @@ Here is an example of a context menu. (Right click to open.)
 
 {{"demo": "ContextMenu.js"}}
 
+## Grouped Menu
+
+Display categories with the `ListSubheader` component.
+
+{{"demo": "GroupedMenu.js"}}
+
 ## Supplementary projects
 
 For more advanced use cases you might be able to take advantage of: