[docs][material-ui][Breadcrumbs] Document CondensedWithMenu option fo…

…r Material UI Breadcrumbs (#42973)

Co-authored-by: ZeeshanTamboli <[email protected]>

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>
+  );
+}

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>
+  );
+}

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.