import { ChevronRightIcon } from "@chakra-ui/icons"; import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator, } from "@chakra-ui/react"; import { useNavigate, useLocation } from "react-router-dom"; export default function BreadcrumbNavigation({ title, }: Record<string, any>): JSX.Element { const navigate = useNavigate(); const { pathname } = useLocation(); const pathnames = pathname.split("/").filter(Boolean); const blogName = pathnames[1]?.replace(/%20/g, " "); // check the pathName for numbers, upper and lower case. //return new path name with spaces, no numbers, and first letter capital // function UpdatePathName(input: string) { // console.log(input); // const result = input.match(/[A-Z]?[a-z]+|\d+|[A-Z]+(?![a-z])/g); // // eslint-disable-next-line @typescript-eslint/ban-ts-comment // // @ts-ignore: Object is possibly 'null' // const newPathName = result.slice(0, 1).join(" "); // return newPathName.charAt(0).toUpperCase() + newPathName.slice(1); // } return ( <Breadcrumb spacing="8px" separator={<ChevronRightIcon color="gray.500" />} > {/* home button */} <BreadcrumbItem key={"home"}> <BreadcrumbLink href="/">Home</BreadcrumbLink> </BreadcrumbItem> if(pathnames.length === 1) { <BreadcrumbItem key={title} id={title} isCurrentPage > <BreadcrumbLink href="#">{title}</BreadcrumbLink> </BreadcrumbItem> } else { <BreadcrumbItem key={pathnames[1]} id={pathnames[1]} isCurrentPage > <BreadcrumbSeparator /> <BreadcrumbLink onClick={() => navigate(pathnames[1])}> {blogName} </BreadcrumbLink> </BreadcrumbItem> } </Breadcrumb> ); }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter