1  import { NavLink } from "react-router-dom";
 2  import { Breadcrumbs, styled } from "@mui/material";
 3  import { Home, NavigateNext } from "@mui/icons-material";
 4  
 5  const BreadcrumbRoot = styled("div")({
 6    display: "flex",
 7    flexWrap: "wrap",
 8    alignItems: "center",
 9    margin: 30
10  });
11  
12  const BreadcrumbName = styled("h4")(({ theme }) => ({
13    margin: 0,
14    fontSize: "16px",
15    paddingBottom: "1px",
16    verticalAlign: "middle",
17    textTransform: "capitalize",
18    [theme.breakpoints.down("xs")]: { display: "none" }
19  }));
20  
21  const SubName = styled("span")(({ theme }) => ({
22    textTransform: "capitalize",
23    color: theme.palette.text.secondary
24  }));
25  
26  const Separator = styled("h4")(({ theme }) => ({
27    margin: 0,
28    marginLeft: 8,
29    paddingBottom: "3px",
30    color: theme.palette.text.hint,
31    [theme.breakpoints.down("xs")]: { display: "none" }
32  }));
33  
34  const StyledIcon = styled(Home)({
35    marginLeft: 8,
36    marginBottom: "4px",
37    verticalAlign: "middle"
38  });
39  
40  export default function Breadcrumb({ routeSegments }) {
41    return (
42      <BreadcrumbRoot>
43        {routeSegments ? (
44          <>
45            <BreadcrumbName>{routeSegments[routeSegments.length - 1]["name"]}</BreadcrumbName>
46            <Separator>|</Separator>
47          </>
48        ) : null}
49  
50        <Breadcrumbs
51          separator={<NavigateNext sx={{ color: "text.hint" }} />}
52          sx={{ display: "flex", alignItems: "center", position: "relative" }}>
53          <NavLink to="/">
54            <StyledIcon color="primary" />
55          </NavLink>
56  
57          {routeSegments
58            ? routeSegments.map((route, index) => {
59              return index !== routeSegments.length - 1 ? (
60                <NavLink key={index} to={route.path}>
61                  <SubName>{route.name}</SubName>
62                </NavLink>
63              ) : (
64                <SubName key={index}>{route.name}</SubName>
65              );
66            })
67            : null}
68        </Breadcrumbs>
69      </BreadcrumbRoot>
70    );
71  }