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), and if I go to create post page from this post list then I want a breadcrumb to be home -> users -> posts. How can I achieve this?4 Replies
Sorry @dipbazz, I am experiencing especially high traffic right now, please try again. :technologist:
inland-turquoise•2y ago
Hey @dipbazz,
You can use
useBreadcrumb hook for create your own breadcrumb component. Can you check out the doc here: https://refine.dev/docs/api-reference/core/hooks/useBreadcrumb/conscious-sapphire•2y ago
Hey @salihozdemir, I have viewed the
useBreadCrumb 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 useBreadCrumb hooks?inland-turquoise•2y ago
Yes, you can use the
useBreadCrumb hook to compose your own breadcrumbs. For the beginning you can use the swizzle command to copy the existing BreadCrumb component to your project and then you can customize it as you want.
After that you can pass your own BreadCrumb component to the <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 breadcrumb prop of the our basic views components like List, Edit, Create, Show etc.
Refer to the for more details: https://refine.dev/docs/api-reference/antd/components/basic-views/create/#breadcrumb