correct-apricot•3y ago

change label of breadcrumb

i am using breadcrumb in create page but i am getting its as patients/create i want to change label of breadcrumb to patients/somevalue

3 Replies

correct-apricotOP•3y ago

<Breadcrumb> </Breadcrumb> imported from refine/antd

correct-apricot•3y ago

<Breadcrumb> uses resource label to display location hierarcy. You can change resource label or you can create custom breadcrumb. you can use this hook to do that. https://refine.dev/docs/api-reference/core/hooks/useBreadcrumb/ you can refer to the <Breadcrumb> source code for help https://github.com/pankod/refine/blob/master/packages/antd/src/components/breadcrumb/index.tsx while rendering breadcrumb, you can map values to anything you want. After created your own <Breadcrumb> component. you should give to pageHeaderProps example:

import CustomBreadcrumb from "./CustomBreadcrumb";

export const PostCreate: React.FC = () => {
    return (
        <Create
            pageHeaderProps={{
                breadcrumb: <CustomBreadcrumb />,
            }}
        >
            ...
        </List>
    );
};

import CustomBreadcrumb from "./CustomBreadcrumb";

export const PostCreate: React.FC = () => {
    return (
        <Create
            pageHeaderProps={{
                breadcrumb: <CustomBreadcrumb />,
            }}
        >
            ...
        </List>
    );
};

correct-apricotOP•3y ago

change label of breadcrumb

Did you find this page helpful?