Refine•3y ago

How to add a custom breadcrumb items?

I have a nested routes and in that nested routes list page the breadcrumb is not show. How to add a custom breadcrumb items to render it.

For example I have a list of users (I don't want to add a breadcrumb in this because it is shown is sider menu, which is fine), but now I have an action button that displays a list of posts related to user (now I want this posts list page to have a breadcrumb as

home -> users

home -> users

), and if I go to create post page from this post list then I want a breadcrumb to be

home -> users -> posts

home -> users -> posts

. How can I achieve this?

kapa.ai•3/20/23, 5:28 AM

Sorry @dipbazz, I am experiencing especially high traffic right now, please try again. :technologist:

colossal-harlequin•3/20/23, 8:24 AM

Hey @dipbazz,

You can use hook for create your own breadcrumb component. Can you check out the doc here: https://refine.dev/docs/api-reference/core/hooks/useBreadcrumb/

spotty-amberOP•3/20/23, 8:59 AM

Hey @salihozdemir, I have viewed the hook but It didn't solved my specific problem. In the documentation it is specified a nested route based on the sider menu. For example if a sider menu contains a parent then it is considered as a nested route. But in my case I don't have such type of nested routes, although I can provide the parent in meta of resource options. My parent can be two resources. So I cannot rely on one resources to be a parent.

Is there a way to compose my own breadcrumbs using hooks?

colossal-harlequin•3/20/23, 9:18 AM

Yes, you can use the hook to compose your own breadcrumbs. For the beginning you can use the

swizzle

swizzle

command to copy the existing component to your project and then you can customize it as you want.

After that you can pass your own component to the

<Refine />

<Refine />

component to set global breadcrumb.

Refer to the for more details: https://refine.dev/docs/api-reference/core/components/refine-config/#breadcrumb

If you want to set breadcrumb for a specific CRUD page, you can use the prop of the our basic views components like , ,

Create

Create

, etc.

Refer to the for more details: https://refine.dev/docs/api-reference/antd/components/basic-views/create/#breadcrumb