Skip to main content
useBreadcrumb is a React hook that generates breadcrumb items based on the current resource and action. It automatically creates a hierarchical breadcrumb trail for navigation.

​
Usage

import { useBreadcrumb } from "@refinedev/core";

const MyComponent = () => {
  const { breadcrumbs } = useBreadcrumb();

  return (
    <nav>
      {breadcrumbs.map((breadcrumb, index) => (
        <span key={index}>
          {breadcrumb.href ? (
            <a href={breadcrumb.href}>
              {breadcrumb.icon}
              {breadcrumb.label}
            </a>
          ) : (
            <span>
              {breadcrumb.icon}
              {breadcrumb.label}
            </span>
          )}
          {index < breadcrumbs.length - 1 && " / "}
        </span>
      ))}
    </nav>
  );
};

​
Parameters

​
Return Values

​
breadcrumbs
BreadcrumbsType[]
Array of breadcrumb items. Each breadcrumb object contains:
​
label
string
Display text for the breadcrumb (from resource meta.label or translated resource name).
​
href
string
URL for the breadcrumb link. If undefined, the breadcrumb is not clickable (typically for the current page).
​
icon
React.ReactNode
Optional icon element from resource meta.

​
Examples

​
Basic Breadcrumb

import { useBreadcrumb } from "@refinedev/core";

const Breadcrumb = () => {
  const { breadcrumbs } = useBreadcrumb();

  return (
    <nav aria-label="Breadcrumb">
      <ol>
        {breadcrumbs.map((breadcrumb, index) => (
          <li key={index}>
            {breadcrumb.href ? (
              <a href={breadcrumb.href}>{breadcrumb.label}</a>
            ) : (
              <span>{breadcrumb.label}</span>
            )}
          </li>
        ))}
      </ol>
    </nav>
  );
};

import { useBreadcrumb } from "@refinedev/core";

const Breadcrumb = () => {
  const { breadcrumbs } = useBreadcrumb();

  return (
    <nav>
      {breadcrumbs.map((breadcrumb, index) => (
        <span key={index}>
          {breadcrumb.href ? (
            <a href={breadcrumb.href}>
              {breadcrumb.icon && <span>{breadcrumb.icon}</span>}
              {breadcrumb.label}
            </a>
          ) : (
            <span>
              {breadcrumb.icon && <span>{breadcrumb.icon}</span>}
              {breadcrumb.label}
            </span>
          )}
          {index < breadcrumbs.length - 1 && <span> / </span>}
        </span>
      ))}
    </nav>
  );
};

import { useBreadcrumb } from "@refinedev/core";

const Breadcrumb = () => {
  const { breadcrumbs } = useBreadcrumb();

  return (
    <nav>
      <ol className="breadcrumb">
        {breadcrumbs.map((breadcrumb, index) => (
          <li key={index} className="breadcrumb-item">
            {breadcrumb.href ? (
              <a href={breadcrumb.href}>{breadcrumb.label}</a>
            ) : (
              <span className="active">{breadcrumb.label}</span>
            )}
          </li>
        ))}
      </ol>
    </nav>
  );
};

import { useBreadcrumb } from "@refinedev/core";

const Breadcrumb = () => {
  const { breadcrumbs } = useBreadcrumb({
    meta: {
      tenant: "company-1",
      workspace: "main",
    },
  });

  return (
    <nav>
      {breadcrumbs.map((breadcrumb, index) => (
        <span key={index}>
          {breadcrumb.href ? (
            <a href={breadcrumb.href}>{breadcrumb.label}</a>
          ) : (
            breadcrumb.label
          )}
          {index < breadcrumbs.length - 1 && " > "}
        </span>
      ))}
    </nav>
  );
};

​
Styled Breadcrumb Component

import { useBreadcrumb } from "@refinedev/core";

const StyledBreadcrumb = () => {
  const { breadcrumbs } = useBreadcrumb();

  return (
    <nav className="flex" aria-label="Breadcrumb">
      <ol className="inline-flex items-center space-x-1 md:space-x-3">
        {breadcrumbs.map((breadcrumb, index) => {
          const isLast = index === breadcrumbs.length - 1;

          return (
            <li key={index} className="inline-flex items-center">
              {index > 0 && (
                <svg
                  className="w-6 h-6 text-gray-400"
                  fill="currentColor"
                  viewBox="0 0 20 20"
                >
                  <path
                    fillRule="evenodd"
                    d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                    clipRule="evenodd"
                  />
                </svg>
              )}
              {breadcrumb.href && !isLast ? (
                <a
                  href={breadcrumb.href}
                  className="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600"
                >
                  {breadcrumb.icon}
                  {breadcrumb.label}
                </a>
              ) : (
                <span className="ml-1 text-sm font-medium text-gray-500">
                  {breadcrumb.icon}
                  {breadcrumb.label}
                </span>
              )}
            </li>
          );
        })}
      </ol>
    </nav>
  );
};

​
Hierarchical Resources

The hook automatically handles parent-child resource relationships defined through the meta.parent property: 
<Refine
  resources={[
    {
      name: "cms",
      list: "/cms",
      meta: { label: "CMS" },
    },
    {
      name: "posts",
      list: "/posts",
      create: "/posts/create",
      edit: "/posts/edit/:id",
      meta: {
        parent: "cms",
        label: "Posts",
      },
    },
  ]}
/>
On the posts edit page, the breadcrumbs would be:
  1. CMS (clickable, links to /cms)
  2. Posts (clickable, links to /posts)
  3. Edit (not clickable, current page)

​
i18n Support

Breadcrumb labels are automatically translated using your i18n provider. The hook looks for translations with the pattern {resourceName}.{resourceName} for resource names and actions.{action} for action names. 
// Translation file
{
  "posts": {
    "posts": "Blog Posts"
  },
  "actions": {
    "create": "Create New",
    "edit": "Edit",
    "show": "Details"
  }
}

​
API Reference

Type definitions: 
export type BreadcrumbsType = {
  label: string;
  href?: string;
  icon?: React.ReactNode;
};

type UseBreadcrumbProps = {
  meta?: Record<string, string | number>;
};

type UseBreadcrumbReturnType = {
  breadcrumbs: BreadcrumbsType[];
};
The breadcrumb trail is generated based on the current resource and action. Resources with a meta.parent property will include their parent resources in the breadcrumb trail.
If you’re using the breadcrumb hook on a page for an action that doesn’t exist in the translation file (e.g., a custom action), make sure to add the corresponding translation key actions.{actionName} to avoid warnings.

Build docs developers (and LLMs) love

Get started for freeTalk to us