inland-turquoise•6mo ago

Hide breadcrum and title

Hi, I'm using refine and antd for create my page I can see the breadcrum, back icon and title on header of each page (list, create, edit, show) Can I remove those Items?

5 Replies

kapa.ai•6mo ago

Hi @Tan Dep Trai So 1. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, you can customize or disable the breadcrumb in refine with Ant Design. This can be done by using the breadcrumb property in your CRUD components (List, Create, Edit, Show). By default, the Breadcrumb component from the @refinedev/antd package is used for breadcrumbs. Here is an example of how to disable the breadcrumb in a List view:

import { List } from "@refinedev/antd";  

const PostList: React.FC = () => {  
 return (  
 <List  
 breadcrumb={false}  
 >  
 <p>Rest of your page here</p>  
 </List>  
 );  
};

import { List } from "@refinedev/antd";  

const PostList: React.FC = () => {  
 return (  
 <List  
 breadcrumb={false}  
 >  
 <p>Rest of your page here</p>  
 </List>  
 );  
};

You can apply the same approach to the Create, Edit, and Show views. As for the title, refine does not provide a direct way to hide it. However, you can customize the layout or create a custom layout to achieve this. Please refer to the documentation (https://refine.dev/docs) for more details on how to do this. Please note that these changes will only affect the component where you apply them. If you want to apply these changes globally, you can set the breadcrumb property in the options of the <Refine /> component. This way, it is managed globally and the breadcrumb property passed to the CRUD component overrides the options. Here is an example of how to do this:

<Refine options={{ breadcrumb: false }} />

<Refine options={{ breadcrumb: false }} />

For more information, you can refer to the Breadcrumb documentation (https://refine.dev/docs/ui-integrations/ant-design/components/breadcrumb) and the Refine configuration documentation (https://refine.dev/docs/api-reference/core/components/refine-config/#options-1). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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

inland-turquoise•6mo ago

@kapa.ai This hide the content but not the heading. I tried to hide those item but when I hide it, there is a space on top, I want to remove those space and heading of ant page header

kapa.ai•6mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To remove the space and heading of the Ant Design page header, you can use the headerProps property to customize the header of the components (List, Create, Edit, Show). You can set the title and subTitle to false and adjust the style to remove the padding. Here is an example of how to do this in a List view:

import { List } from "@refinedev/antd";  

const PostList: React.FC = () => {  
 return (  
 <List  
 headerProps={{  
 title: false,
 subTitle: false,
 style: {  
 padding: "0px",  
 },  
 }}  
 >  
 <p>Rest of your page here</p>  
 </List>  
 );  
};

import { List } from "@refinedev/antd";  

const PostList: React.FC = () => {  
 return (  
 <List  
 headerProps={{  
 title: false,
 subTitle: false,
 style: {  
 padding: "0px",  
 },  
 }}  
 >  
 <p>Rest of your page here</p>  
 </List>  
 );  
};

You can apply the same approach to the Create, Edit, and Show views. For more information, you can refer to the PageHeader documentation (https://procomponents.ant.design/en-US/components/page-header) and the Refine documentation (https://refine.dev/docs). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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