Breadcrumb

utils/BreadCrumbHelper.js

import { Breadcrumb, BreadcrumbItem,BreadcrumbLink } from '@chakra-ui/react'
import React from 'react'

import {  NavLink } from "react-router-dom";
import { ChevronRightIcon } from "@chakra-ui/icons";

function BreadCrumbHelper(props) {
	console.log(props.data)
	
  return (
<Breadcrumb
	spacing="8px"
	separator={<ChevronRightIcon color="gray.500" />}
>
	{props.data.map((x)=>
	<BreadcrumbItem key={Number.random}>
		<BreadcrumbLink as={NavLink} to={x.link}>
		{x.title}
		</BreadcrumbLink>
	</BreadcrumbItem>
	)}
</Breadcrumb>
  )
}

export default BreadCrumbHelper

src/App.jsx

import React from 'react'
import BreadCrumbHelper from '../../../Utils/BreadCrumbHelper';

function App() {

return(
<>
    <BreadCrumbHelper data={[
        {title:'Human Resources',link:'/human-resources/home'},
        {title:'Employees',link:'/human-resources/employees'},
        {title:'Add',link:'/human-resources/employees/add'},
    ]}/>
    
</>
)}

export default App