To create breadcrumbs in Next js, you can follow these steps:
- Make sure you have the
usePathname
hook imported from'next/navigation'
. - Create a wrapper component around the pages where you want to display breadcrumbs.
- Use the
NextBreadcrumb
component within this wrapper component. - Customize the appearance and behavior of the breadcrumbs using the props provided by
NextBreadcrumb
.
Here's an example of how you can use the NextBreadcrumb
component in a Next.js application:
// pages/Layout.js
import React from 'react';
import NextBreadcrumb from '../components/NextBreadcrumb';
const Layout = ({ children }) => {
// You can customize the homeElement, separator, and other props as needed
return (
<div>
<NextBreadcrumb
homeElement="Home"
separator=">"
containerClasses="breadcrumbs"
listClasses="breadcrumb-item"
activeClasses="active"
capitalizeLinks={true}
/>
{children}
</div>
);
};
export default Layout;
// components/NextBreadcrumb.js
import React, { ReactNode } from 'react';
import { usePathname } from 'next/navigation';
import Link from 'next/link';
type TBreadCrumbProps = {
homeElement: ReactNode;
separator: ReactNode;
containerClasses?: string;
listClasses?: string;
activeClasses?: string;
capitalizeLinks?: boolean;
};
const NextBreadcrumb = ({
homeElement,
separator,
containerClasses,
listClasses,
activeClasses,
capitalizeLinks,
}: TBreadCrumbProps) => {
const paths = usePathname();
const pathNames = paths.split('/').filter((path) => path);
return (
<div>
<ul className={containerClasses}>
<li className={listClasses}>
<Link href={'/'}>{homeElement}</Link>
</li>
{pathNames.length > 0 && separator}
{pathNames.map((link, index) => {
let href = `/${pathNames.slice(0, index + 1).join('/')}`;
let itemClasses =
paths === href ? `${listClasses} ${activeClasses}` : listClasses;
let itemLink = capitalizeLinks
? link[0].toUpperCase() + link.slice(1, link.length)
: link;
return (
<React.Fragment key={index}>
<li className={itemClasses}>
<Link href={href}>{itemLink}</Link>
</li>
{pathNames.length !== index + 1 && separator}
</React.Fragment>
);
})}
</ul>
</div>
);
};
export default NextBreadcrumb;
Then, in your individual pages, you can use this layout component:
// pages/somepage.js
import React from 'react';
import Layout from './Layout';
const SomePage = () => {
return (
<Layout>
<div>
<h1>This is Some Page</h1>
{/* Your page content here */}
</div>
</Layout>
);
};
export default SomePage;
This way, each page wrapped with the Layout
component will have breadcrumbs automatically generated based on the page's URL. Adjust the props passed to NextBreadcrumb
as needed to fit your design requirements.
Top comments (0)