adverse-sapphire
adverse-sapphire15mo ago

Breadcrumb is hidden from all of my pages after upgrading to latest version.

I have upgraded my refine version 4 to the latest version and now my breadcrumb is gone. Is there some settings or something that I messed up? It was working fine on previous version of I guess 4.2.x or something but when I am in version 4.5.6 there is not breadcrumb 🤔
11 Replies
kapa.ai
kapa.ai15mo ago
Hi @dipbazz. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
kapa.ai
kapa.ai15mo ago
---------------------- It's possible that the breadcrumb settings have changed between the versions you've upgraded. To customize or disable the breadcrumb in your refine application, you can use the breadcrumb property. By default, it uses the Breadcrumb component from the respective package (e.g., @refinedev/antd, @refinedev/mantine, @refinedev/mui, or @refinedev/chakra-ui). You can also manage the breadcrumb feature globally via the <Refine> component's options. Here's an example of how to set the breadcrumb in the <Refine> component:
import { Breadcrumb } from "antd"; // or other respective package

const App: React.FC = () => {
return (
<Refine
...
options={{
breadcrumb: (
<div
style={{
padding: "3px 6px",
border: "2px dashed cornflowerblue",
}}
>
<Breadcrumb />
</div>
),
}}
/>
);
};
import { Breadcrumb } from "antd"; // or other respective package

const App: React.FC = () => {
return (
<Refine
...
options={{
breadcrumb: (
<div
style={{
padding: "3px 6px",
border: "2px dashed cornflowerblue",
}}
>
<Breadcrumb />
</div>
),
}}
/>
);
};
To disable the breadcrumb:
const App: React.FC = () => {
return (
<Refine
...
options={{
breadcrumb: false,
}}
/>
);
};
const App: React.FC = () => {
return (
<Refine
...
options={{
breadcrumb: false,
}}
/>
);
};
Please check your application's code and ensure that the breadcrumb property is set correctly. You can refer to the documentation for more information on breadcrumb customization: - Refine Config Breadcrumb (https://refine.dev/docs/api-reference/core/components/refine-config/#breadcrumb) - Breadcrumb Component Documentation (https://refine.dev/docs/api-reference/antd/components/breadcrumb/) (Replace antd with the respective package you're using)
Breadcrumb | refine
A breadcrumb displays the current location within a hierarchy. It allows going back to states higher up in the hierarchy. component built with Ant Design's Breadcrumb components using the useBreadcrumb hook.
| refine
`` component is the entry point of a refine app. It is where the highest level of configuration of the app occurs.
kapa.ai
kapa.ai15mo ago
If the issue persists, it might be related to a bug or an undocumented change in the newer version of refine. In that case, you can consider reporting the issue to the refine team. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai15mo ago
<@494653850632978472> kapa.ai is still learning and improving, please let us how it did by reacting below
other-emerald
other-emerald15mo ago
Let's check it in the example applications. Which UI framework are you using?
adverse-sapphire
adverse-sapphire15mo ago
Hey @yildirayunlu, I am using antd
other-emerald
other-emerald15mo ago
With npm create refine-app@latest -- --example base-antd https://github.com/refinedev/refine/tree/next/examples/base-antd I got the app here and ran it. I didn't see any problem with breadcrumb.
adverse-sapphire
adverse-sapphire14mo ago
Hey @yildirayunlu, I have also pulled the example and checked its working. But the breadcrumb is not working in my case. I am not sure if I messed something or a version bump. I couldn't figure out what is the reason behind my problem. Can you help me out?
other-emerald
other-emerald14mo ago
Hey @dipbazz We are sorry for this problem, we will try our best to solve it. If you can prepare a codesanbox where we can reproduce this problem, we can understand what the problem is.
adverse-sapphire
adverse-sapphire14mo ago
Hey @yildirayunlu, I will provide a codesandbox If I could reproduce the same issues. But having hard time to recreate the same issue.
other-emerald
other-emerald14mo ago
We need this to get the problem. If you can open an issue, I think we will take faster action.