rare-sapphire•17mo 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•17mo 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•17mo 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•17mo 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•17mo ago

<@494653850632978472> kapa.ai is still learning and improving, please let us how it did by reacting below

continuing-cyan•17mo ago

Let's check it in the example applications. Which UI framework are you using?

rare-sapphire•17mo ago

Hey @yildirayunlu, I am using antd

continuing-cyan•17mo 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.

rare-sapphire•17mo 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?

continuing-cyan•17mo 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.

rare-sapphire•17mo ago

Hey @yildirayunlu, I will provide a codesandbox If I could reproduce the same issues. But having hard time to recreate the same issue.

continuing-cyan•17mo ago

We need this to get the problem. If you can open an issue, I think we will take faster action.