From e727062097db892b18d10dd435f11d3dd3601d8d Mon Sep 17 00:00:00 2001
From: Sergio Rene Tapia-Fikes <47071119+Sergio16T@users.noreply.github.com>
Date: Fri, 13 Sep 2024 05:19:36 -0500
Subject: [PATCH] [docs][material-ui][Breadcrumbs] Document CondensedWithMenu
 option for Material UI Breadcrumbs (#42973)

Co-authored-by: ZeeshanTamboli <zeeshan.tamboli@gmail.com>
---
 .../breadcrumbs/CondensedWithMenu.js          | 51 +++++++++++++++++++
 .../breadcrumbs/CondensedWithMenu.tsx         | 51 +++++++++++++++++++
 .../components/breadcrumbs/breadcrumbs.md     |  6 +++
 3 files changed, 108 insertions(+)
 create mode 100644 docs/data/material/components/breadcrumbs/CondensedWithMenu.js
 create mode 100644 docs/data/material/components/breadcrumbs/CondensedWithMenu.tsx

diff --git a/docs/data/material/components/breadcrumbs/CondensedWithMenu.js b/docs/data/material/components/breadcrumbs/CondensedWithMenu.js
new file mode 100644
index 00000000000000..58ae9446070b07
--- /dev/null
+++ b/docs/data/material/components/breadcrumbs/CondensedWithMenu.js
@@ -0,0 +1,51 @@
+import * as React from 'react';
+import Breadcrumbs from '@mui/material/Breadcrumbs';
+import Link from '@mui/material/Link';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import IconButton from '@mui/material/IconButton';
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
+
+export default function CondensedWithMenu() {
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const open = Boolean(anchorEl);
+
+  const handleClick = (event) => {
+    if (event) {
+      setAnchorEl(event.currentTarget);
+    }
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <React.Fragment>
+      <Menu
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="with-menu-demo-breadcrumbs"
+      >
+        <MenuItem onClick={handleClose}>Breadcrumb 2</MenuItem>
+        <MenuItem onClick={handleClose}>Breadcrumb 3</MenuItem>
+        <MenuItem onClick={handleClose}>Breadcrumb 4</MenuItem>
+      </Menu>
+      <Breadcrumbs aria-label="breadcrumbs">
+        <Link color="primary" href="#condensed-with-menu">
+          Breadcrumb 1
+        </Link>
+        <IconButton color="primary" size="small" onClick={handleClick}>
+          <MoreHorizIcon />
+        </IconButton>
+        <Link color="primary" href="#condensed-with-menu">
+          Breadcrumb 5
+        </Link>
+        <Link color="primary" href="#condensed-with-menu">
+          Breadcrumb 6
+        </Link>
+      </Breadcrumbs>
+    </React.Fragment>
+  );
+}
diff --git a/docs/data/material/components/breadcrumbs/CondensedWithMenu.tsx b/docs/data/material/components/breadcrumbs/CondensedWithMenu.tsx
new file mode 100644
index 00000000000000..b7b2acc59e90cf
--- /dev/null
+++ b/docs/data/material/components/breadcrumbs/CondensedWithMenu.tsx
@@ -0,0 +1,51 @@
+import * as React from 'react';
+import Breadcrumbs from '@mui/material/Breadcrumbs';
+import Link from '@mui/material/Link';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import IconButton from '@mui/material/IconButton';
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
+
+export default function CondensedWithMenu() {
+  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
+  const open = Boolean(anchorEl);
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement> | null) => {
+    if (event) {
+      setAnchorEl(event.currentTarget);
+    }
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <React.Fragment>
+      <Menu
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="with-menu-demo-breadcrumbs"
+      >
+        <MenuItem onClick={handleClose}>Breadcrumb 2</MenuItem>
+        <MenuItem onClick={handleClose}>Breadcrumb 3</MenuItem>
+        <MenuItem onClick={handleClose}>Breadcrumb 4</MenuItem>
+      </Menu>
+      <Breadcrumbs aria-label="breadcrumbs">
+        <Link color="primary" href="#condensed-with-menu">
+          Breadcrumb 1
+        </Link>
+        <IconButton color="primary" size="small" onClick={handleClick}>
+          <MoreHorizIcon />
+        </IconButton>
+        <Link color="primary" href="#condensed-with-menu">
+          Breadcrumb 5
+        </Link>
+        <Link color="primary" href="#condensed-with-menu">
+          Breadcrumb 6
+        </Link>
+      </Breadcrumbs>
+    </React.Fragment>
+  );
+}
diff --git a/docs/data/material/components/breadcrumbs/breadcrumbs.md b/docs/data/material/components/breadcrumbs/breadcrumbs.md
index b26cfc1f0af654..dea04ba065698f 100644
--- a/docs/data/material/components/breadcrumbs/breadcrumbs.md
+++ b/docs/data/material/components/breadcrumbs/breadcrumbs.md
@@ -37,6 +37,12 @@ In the following examples, we are using two string separators and an SVG icon.
 
 {{"demo": "CollapsedBreadcrumbs.js"}}
 
+## Condensed with menu
+
+As an alternative, consider adding a Menu component to display the condensed links in a dropdown list:
+
+{{"demo": "CondensedWithMenu.js"}}
+
 ## Customization
 
 Here is an example of customizing the component.