[Joy] Add Breadcrumbs component (#32697)

docs/data/joy/components/breadcrumbs/BasicBreadcrumbs.js

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import Breadcrumbs from '@mui/joy/Breadcrumbs';
+import Link from '@mui/joy/Link';
+import Typography from '@mui/joy/Typography';
+
+export default function BasicBreadcrumbs() {
+  return (
+    <Breadcrumbs separator="›" aria-label="breadcrumbs">
+      {['Fry', 'Leela', 'Bender', 'Linda'].map((item) => (
+        <Link
+          // The `preventDefault` is for demonstration purposes, generally, you don't need it in your application
+          onClick={(event) => event.preventDefault()}
+          key={item}
+          underline="hover"
+          color="neutral"
+          fontSize="inherit"
+          href="/"
+        >
+          {item}
+        </Link>
+      ))}
+
+      <Typography fontSize="inherit">Amy</Typography>
+    </Breadcrumbs>
+  );
+}

docs/data/joy/components/breadcrumbs/BasicBreadcrumbs.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import Breadcrumbs from '@mui/joy/Breadcrumbs';
+import Link from '@mui/joy/Link';
+import Typography from '@mui/joy/Typography';
+
+export default function BasicBreadcrumbs() {
+  return (
+    <Breadcrumbs separator="›" aria-label="breadcrumbs">
+      {['Fry', 'Leela', 'Bender', 'Linda'].map((item: string) => (
+        <Link
+          // The `preventDefault` is for demonstration purposes, generally, you don't need it in your application
+          onClick={(event) => event.preventDefault()}
+          key={item}
+          underline="hover"
+          color="neutral"
+          fontSize="inherit"
+          href="/"
+        >
+          {item}
+        </Link>
+      ))}
+      <Typography fontSize="inherit">Amy</Typography>
+    </Breadcrumbs>
+  );
+}

docs/data/joy/components/breadcrumbs/BasicBreadcrumbs.tsx.preview

@@ -0,0 +1,16 @@
+<Breadcrumbs separator="›" aria-label="breadcrumbs">
+  {['Fry', 'Leela', 'Bender', 'Linda'].map((item: string) => (
+    <Link
+      // The `preventDefault` is for demonstration purposes, generally, you don't need it in your application
+      onClick={(event) => event.preventDefault()}
+      key={item}
+      underline="hover"
+      color="neutral"
+      fontSize="inherit"
+      href="/"
+    >
+      {item}
+    </Link>
+  ))}
+  <Typography fontSize="inherit">Amy</Typography>
+</Breadcrumbs>

docs/data/joy/components/breadcrumbs/BreadcrumbsUsage.js

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import Link from '@mui/joy/Link';
+import Typography from '@mui/joy/Typography';
+import Breadcrumbs from '@mui/joy/Breadcrumbs';
+import JoyUsageDemo from 'docs/src/modules/components/JoyUsageDemo';
+
+export default function BreadcrumbsUsage() {
+  return (
+    <JoyUsageDemo
+      componentName="Breadcrumbs"
+      data={[
+        {
+          propName: 'size',
+          knob: 'radio',
+          options: ['sm', 'md', 'lg'],
+          defaultValue: 'md',
+        },
+        {
+          propName: 'separator',
+          knob: 'input',
+          defaultValue: '/',
+        },
+        {
+          propName: 'children',
+          defaultValue: '<Link />\n  ...',
+        },
+      ]}
+      renderDemo={(props) => (
+        <Breadcrumbs {...props} aria-label="breadcrumbs">
+          <Link
+            // The `preventDefault` is for demonstration purposes, generally, you don't need it in your application
+            onClick={(event) => event.preventDefault()}
+            underline="hover"
+            color="neutral"
+            href="/"
+            fontSize="inherit"
+          >
+            MUI
+          </Link>
+          <Link
+            // The `preventDefault` is for demonstration purposes, generally, you don't need it in your application
+            onClick={(event) => event.preventDefault()}
+            underline="hover"
+            color="neutral"
+            href="/joy-ui/getting-started/installation/"
+            fontSize="inherit"
+          >
+            Joy
+          </Link>
+          <Typography fontSize="inherit">Breadcrumbs</Typography>
+        </Breadcrumbs>
+      )}
+    />
+  );
+}

docs/data/joy/components/breadcrumbs/BreadcrumbsVariables.js

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import Breadcrumbs from '@mui/joy/Breadcrumbs';
+import Link from '@mui/joy/Link';
+import Typography from '@mui/joy/Typography';
+import JoyVariablesDemo from 'docs/src/modules/components/JoyVariablesDemo';
+
+export default function BreadcrumbsVariables() {
+  return (
+    <JoyVariablesDemo
+      componentName="Breadcrumbs"
+      data={[
+        {
+          var: '--Breadcrumbs-gap',
+          defaultValue: '4px',
+        },
+      ]}
+      renderDemo={(sx) => (
+        <Breadcrumbs sx={sx}>
+          {['Menu 1', 'Menu 2'].map((item) => (
+            <Link
+              // The `preventDefault` is for demonstration purposes, generally, you don't need it in your application
+              onClick={(event) => event.preventDefault()}
+              key={item}
+              underline="hover"
+              color="neutral"
+              fontSize="inherit"
+              href="/"
+            >
+              {item}
+            </Link>
+          ))}
+
+          <Typography fontSize="inherit">Menu 3</Typography>
+        </Breadcrumbs>
+      )}
+    />
+  );
+}

docs/data/joy/components/breadcrumbs/BreadcrumbsVariables.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import Breadcrumbs from '@mui/joy/Breadcrumbs';
+import Link from '@mui/joy/Link';
+import Typography from '@mui/joy/Typography';
+import JoyVariablesDemo from 'docs/src/modules/components/JoyVariablesDemo';
+
+export default function BreadcrumbsVariables() {
+  return (
+    <JoyVariablesDemo
+      componentName="Breadcrumbs"
+      data={[
+        {
+          var: '--Breadcrumbs-gap',
+          defaultValue: '4px',
+        },
+      ]}
+      renderDemo={(sx) => (
+        <Breadcrumbs sx={sx}>
+          {['Menu 1', 'Menu 2'].map((item: string) => (
+            <Link
+              // The `preventDefault` is for demonstration purposes, generally, you don't need it in your application
+              onClick={(event) => event.preventDefault()}
+              key={item}
+              underline="hover"
+              color="neutral"
+              fontSize="inherit"
+              href="/"
+            >
+              {item}
+            </Link>
+          ))}
+          <Typography fontSize="inherit">Menu 3</Typography>
+        </Breadcrumbs>
+      )}
+    />
+  );
+}

docs/data/joy/components/breadcrumbs/BreadcrumbsWithIcon.js

@@ -0,0 +1,38 @@
+import HomeIcon from '@mui/icons-material/Home';
+import * as React from 'react';
+import Breadcrumbs from '@mui/joy/Breadcrumbs';
+import Link from '@mui/joy/Link';
+import Typography from '@mui/joy/Typography';
+
+export default function BreadcrumbsWithIcon() {
+  return (
+    <Breadcrumbs separator="›" aria-label="breadcrumbs">
+      <Link
+        // The `preventDefault` is for demonstration purposes, generally, you don't need it in your application
+        onClick={(event) => event.preventDefault()}
+        underline="hover"
+        color="primary"
+        fontSize="inherit"
+        href="/"
+      >
+        <HomeIcon sx={{ mr: 0.5 }} fontSize="inherit" />
+        Jake
+      </Link>
+      {['Rosa', 'Charles'].map((item) => (
+        <Link
+          // The `preventDefault` is for demonstration purposes, generally, you don't need it in your application
+          onClick={(event) => event.preventDefault()}
+          key={item}
+          underline="hover"
+          color="primary"
+          fontSize="inherit"
+          href="/"
+        >
+          {item}
+        </Link>
+      ))}
+
+      <Typography fontSize="inherit">Hitchcock</Typography>
+    </Breadcrumbs>
+  );
+}

docs/data/joy/components/breadcrumbs/BreadcrumbsWithIcon.tsx

@@ -0,0 +1,37 @@
+import HomeIcon from '@mui/icons-material/Home';
+import * as React from 'react';
+import Breadcrumbs from '@mui/joy/Breadcrumbs';
+import Link from '@mui/joy/Link';
+import Typography from '@mui/joy/Typography';
+
+export default function BreadcrumbsWithIcon() {
+  return (
+    <Breadcrumbs separator="›" aria-label="breadcrumbs">
+      <Link
+        // The `preventDefault` is for demonstration purposes, generally, you don't need it in your application
+        onClick={(event) => event.preventDefault()}
+        underline="hover"
+        color="primary"
+        fontSize="inherit"
+        href="/"
+      >
+        <HomeIcon sx={{ mr: 0.5 }} fontSize="inherit" />
+        Jake
+      </Link>
+      {['Rosa', 'Charles'].map((item: string) => (
+        <Link
+          // The `preventDefault` is for demonstration purposes, generally, you don't need it in your application
+          onClick={(event) => event.preventDefault()}
+          key={item}
+          underline="hover"
+          color="primary"
+          fontSize="inherit"
+          href="/"
+        >
+          {item}
+        </Link>
+      ))}
+      <Typography fontSize="inherit">Hitchcock</Typography>
+    </Breadcrumbs>
+  );
+}

docs/data/joy/components/breadcrumbs/BreadcrumbsWithMenu.js

@@ -0,0 +1,69 @@
+import Breadcrumbs from '@mui/joy/Breadcrumbs';
+import Button from '@mui/joy/Button';
+import Link from '@mui/joy/Link';
+import Menu from '@mui/joy/Menu';
+import MenuItem from '@mui/joy/MenuItem';
+import * as React from 'react';
+
+export default function BreadcrumbsWithMenu() {
+  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
+          // The `preventDefault` is for demonstration purposes, generally, you don't need it in your application
+          onClick={(event) => event.preventDefault()}
+          underline="hover"
+          color="primary"
+          href="/"
+          fontSize="inherit"
+        >
+          Breadcrumb 1
+        </Link>
+        <Button size="sm" onClick={handleClick} variant="plain" color="primary">
+          •••
+        </Button>
+        <Link
+          // The `preventDefault` is for demonstration purposes, generally, you don't need it in your application
+          onClick={(event) => event.preventDefault()}
+          underline="hover"
+          color="primary"
+          href="/"
+          fontSize="inherit"
+        >
+          Breadcrumb 5
+        </Link>
+        <Link
+          // The `preventDefault` is for demonstration purposes, generally, you don't need it in your application
+          onClick={(event) => event.preventDefault()}
+          underline="hover"
+          color="primary"
+          href="/"
+          fontSize="inherit"
+        >
+          Breadcrumb 6
+        </Link>
+      </Breadcrumbs>
+    </React.Fragment>
+  );
+}