Skip to Content
FrontendBundlesComponentsLayoutBreadcrumb Custom

Breadcrumb Custom

A breadcrumb bar tied to BreadcrumbContext. Pages set their own breadcrumb trail via setBreadcrumb() and this component renders it automatically.

Import

import { BreadcrumbCustom } from "@phpcreation/frontend-components-react-nextjs-bundle/components/BreadcrumbCustom";
import { BreadcrumbProvider, useBreadcrumb } from "@phpcreation/frontend-components-react-nextjs-bundle/contexts";

Setup

Wrap your layout with BreadcrumbProvider, mount BreadcrumbCustom in the header, and call setBreadcrumb() in each page:

// layout.tsx
import { BreadcrumbProvider } from "@phpcreation/frontend-components-react-nextjs-bundle/contexts";
import { BreadcrumbCustom } from "@phpcreation/frontend-components-react-nextjs-bundle/components/BreadcrumbCustom";
 
export default function Layout({ children }) {
  return (
    <BreadcrumbProvider>
      <header>
        <BreadcrumbCustom />
      </header>
      <main>{children}</main>
    </BreadcrumbProvider>
  );
}
// products/page.tsx
"use client";
import { useBreadcrumb } from "@phpcreation/frontend-components-react-nextjs-bundle/contexts";
import { useEffect } from "react";
 
export default function ProductsPage() {
  const { setBreadcrumb } = useBreadcrumb();
 
  useEffect(() => {
    setBreadcrumb([
      { name: "Home", link: "/" },
      { name: "Products" },  // no link = current page
    ]);
  }, []);
 
  return <ProductList />;
}

pageListProps Type

type pageListProps = {
  name: string;
  link?: string; // omit for current (non-clickable) page
};
Last updated on
FooterMode Toggle