Breadcrumbs helps us to enhance how users navigate to previous page levels of our product, especially because it has many pages.

This component extends the
Chakra UI Breadcrumb

This Breadcrumb snippet is more of a recipe than a theme customization.

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

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

function Example() {
    const [current, setCurrent] = React.useState(0);
    const routes = ['HRM', 'Employees', 'Training'];
    console.log(routes.length);
    return (
        <Breadcrumb>
            {routes.map((route, idx) => {
                const currentPage = current === idx;
                return (
                    <BreadcrumbItem
                        key={idx}
                        onClick={() => setCurrent(idx)}
                        isCurrentPage={currentPage}
                    >
                        <BreadcrumbLink color={currentPage ? 'green' : 'initial'} href='#'>
                            {route}
                        </BreadcrumbLink>
                    </BreadcrumbItem>
                );
            })}
        </Breadcrumb>
    );
}

function Example() {
    const [current, setCurrent] = React.useState(0);
    const routes = ['HRM', 'Employees', 'Training'];
    console.log(routes.length);
    return (
        <Breadcrumb>
            {routes.map((route, idx) => {
                const currentPage = current === idx;
                return (
                    <BreadcrumbItem
                        key={idx}
                        onClick={() => setCurrent(idx)}
                        isCurrentPage={currentPage}
                    >
                        <BreadcrumbLink color={currentPage ? 'green' : 'initial'} href='#'>
                            {route}
                        </BreadcrumbLink>
                    </BreadcrumbItem>
                );
            })}
        </Breadcrumb>
    );
}

Editable Example