Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | 5x 40x 40x 176x 68x 40x 136x 68x 68x 68x 248x 68x | import React from "react";
import "./Breadcrumbs.scss";
import { Link, useLocation } from "react-router-dom";
import Breadcrumbs from "@mui/material/Breadcrumbs";
import Typography from "@mui/material/Typography";
import NavigateNextIcon from "@mui/icons-material/NavigateNext";
import { Box, Divider } from "@mui/material";
const BreadcrumbsComponent = ({ homeName }) => {
const location = useLocation();
const excludePathnames = [
"staff",
"teacher",
"student",
"assignment",
"new",
"answer",
"search",
"analytics",
"STAAR",
"TSI",
"ACT",
"SAT",
];
const pathnames = location.pathname.split("/").filter((name) => name);
const capitalizeFirstLetter = (str) => `${str.charAt(0).toUpperCase()}${str.slice(1)}`;
return (
<React.Fragment>
<Box className="dynamic-breadcrumb-content">
<Breadcrumbs
aria-label="breadcrumb"
maxItems={5}
itemsAfterCollapse={2}
separator={<NavigateNextIcon fontSize="small" />}
>
{homeName && (
<Typography variant="body2" sx={{ textDecoration: "underline" }}>
{capitalizeFirstLetter(homeName)}
</Typography>
)}
{pathnames
.filter((item) => !excludePathnames.includes(item)) // to remove first path
.map((name, index) => {
const formatRoutePath = (str) => {
return str.replace(/%20/g, " ");
};
const routeTo = `/${pathnames.slice(0, index + 2).join("/")}`;
const isLast =
index === pathnames.filter((item) => !excludePathnames.includes(item)).length - 1;
return isLast ? (
<Typography variant="body2" key={name}>
{capitalizeFirstLetter(formatRoutePath(name))}
</Typography>
) : (
<Link key={name} to={routeTo}>
<Typography variant="body2" sx={{ textDecoration: "underline" }}>
{capitalizeFirstLetter(formatRoutePath(name))}
</Typography>
</Link>
);
})}
</Breadcrumbs>
</Box>
{(homeName || pathnames.length > 1) && <Divider />}
</React.Fragment>
);
};
export default BreadcrumbsComponent;
// HOW TO USE
// REMINDER: hide the first route path
// import BreadcrumbsComponent from "../../../commons/components/breadcrumbs/Breadcrumbs";
// <BreadcrumbsComponent homeName="Dashboard" /> <--- set homeName to show the first route name
// <BreadcrumbsComponent /> <-- for normal page
|