How to create custom breadcrumbs in Next js?

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.

If you enjoy my content and would like to support my work, you can buy me a coffee. Your support is greatly appreciated!

Disclaimer: This content has been generated by AI.

Blog

How to create custom breadcrumbs in Next js?

Nadim Chowdhury

Join Our Newsletter. No Spam, Only the good stuff.

Related