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.

Support My Work ❤️

If you enjoy my content and find it valuable, consider supporting me by buying me a coffee. Your support helps me continue creating and sharing useful resources. Thank you!

Connect with Me 🌍

Let’s stay connected! You can follow me or reach out on these platforms:

🔹 YouTube – Tutorials, insights & tech content

🔹 LinkedIn – Professional updates & networking

🔹 GitHub – My open-source projects & contributions

🔹 Instagram – Behind-the-scenes & personal updates

🔹 X (formerly Twitter) – Quick thoughts & tech discussions

I’d love to hear from you—whether it’s feedback, collaboration ideas, or just a friendly hello!