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
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:
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:
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:
----------------------<@369510721135837184> kapa.ai is still learning and improving, please let us know how it did by reacting below
eastern-cyan•8mo 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
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:
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:
----------------------<@369510721135837184> kapa.ai is still learning and improving, please let us know how it did by reacting below