Skip to main content

useBreadcrumbs

Derives a breadcrumb trail from the current URL and an optional route configuration, then exposes it as a BreadcrumbItem[] array.

Import​

import { useBreadcrumbs } from "@xocialive/ui-components/hooks";
import type { BreadcrumbItem } from "@xocialive/ui-components/hooks";

Usage​

function PageHeader() {
  const breadcrumbs = useBreadcrumbs();

  return (
    <Breadcrumbs>
      {breadcrumbs.map((crumb, i) =>
        i < breadcrumbs.length - 1 ? (
          <Link key={crumb.path} to={crumb.path}>
            {crumb.label}
          </Link>
        ) : (
          <Typography key="current">{crumb.label}</Typography>
        )
      )}
    </Breadcrumbs>
  );
}

With custom route labels​

const breadcrumbs = useBreadcrumbs({
  routeLabels: {
    "/users": "Users",
    "/users/:id": "User Details",
    "/users/:id/edit": "Edit User",
  },
});
type BreadcrumbItem = {
  label: string;
  path: string;
};