useBreadcrumb
The feature won first place with the joint votes of our team members in a May 2022 internal hackathon!
Congratulations @salihozdemir! It was great seeing your project take first place! We're all very proud of you. Keep up the good work and don't forget to have fun while working here 🎉
It is a hook that returns breadcrumbs to create breadcrumbs for the current page. The breadcrumbs is an array of objects with the following properties:
label: the label of the resource.href: the route of the resource.icon: the icon of the resource.
Basic Usage
import React from "react";
import { useBreadcrumb } from "@pankod/refine-core";
export const Breadcrumb: React.FC = () => {
const { breadcrumbs } = useBreadcrumb();
return (
<ul>
{breadcrumbs.map(({ label, href, icon }) => (
<li key={label}>
{icon}
{href ? <a href={href}>{label}</a> : label}
</li>
))}
</ul>
);
};
Examples
Resource
The breadcrumbs are created with your resource definitions. For example, if you have a resource with the following definition:
[
{
name: "posts",
icon: <div>icon</div>,
list: () => <div>List Page</div>,
create: () => <div>Create Page</div>,
},
];
On the
listpage of thepostsresource, the breadcrumbs look like this:[
{
label: "Posts",
href: "/posts",
icon: <div>icon</div>,
},
];On the
createpage of thepostsresource, the breadcrumbs look like this:[
{
label: "Posts",
href: "/posts",
icon: <div>icon</div>,
},
{ label: "Create" },
];
If the resource has no icon property, the icon property of the breadcrumbs is undefined. Likewise, if the resource's list page is not found, the href property of the breadcrumbs is undefined.
Nested resource
If you have a nested resource definition as below:
[
{
name: "cms",
},
{
name: "users",
parentName: "cms",
list: () => <div>List Page</div>,
create: () => <div>Create Page</div>,
},
];
On the
listpage of theusersresource, the breadcrumbs look like this:[
{ label: "Cms" },
{
label: "Users",
href: "/users",
},
];On the
createpage of theusersresource, the breadcrumbs look like this:[
{ label: "Cms" },
{
label: "Users",
href: "/users",
},
{ label: "Create" },
];
i18n support
If the resource definition has a label property, useBreadcrumbs uses the label property. Otherwise, the name property of the resource is used. Likewise, if the resource definition has route property, useBreadcrumbs uses the route property. Otherwise, the name property of the resource is used.
If a label is not provided in your posts resource, useBreadcrumb uses the useTranslate hook to translate the names.
For CRUD operations (list,create,edit,show) the useBreadcrumb uses the actions key to translate key translate(`actions.${action}`).
For example; create action should look like : translate(`actions.create`)
API Reference
Return values
| Property | Description | Type |
|---|---|---|
| breadcrumbs | The breadcrumbs array | BreadcrumbsType* |
BreadcrumbsType
type BreadcrumbsType = {
label: string;
href?: string;
icon?: React.ReactNode;
};