How to add custom navigation item to sider in antd design
I would like to add another element to the sider called "Profile", which should allow the user to see and edit their own profile. How can I do this?
2 Replies
Hi @BlackBearFTW. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
In Refine, you can add a custom navigation item to the Sider component in several ways. Here are three approaches:
1. Using Resource Definitions: You can use the
resources
property on the <Refine>
component. The <Sider>
component shows the resources whose list
property is set. So, you can have an extra navigation link by adding a resource with the list
attribute. Here is an example:
In this example, a new navigation link "Profile" will be added to the sidebar. When clicked, it will navigate to "/profile". You can replace the icon
and label
with your desired icon and label. Source (https://refine.dev/docs/guides-concepts/faq#how-can-i-add-an-item-to-the-sider-component)
2. Using render
property of <Sider>
component: You can use the render
property of the <Sider>
component. The render
property is a function that receives an object with the items
and logout
properties. Here is an example:
In this example, a new navigation link "Profile" will be added to the sidebar. When clicked, it will navigate to "/profile". You can replace the icon
and label
with your desired icon and label. Source (https://refine.dev/docs/guides-concepts/faq#using-render-property-of-sider-component)
3. Using swizzle
command: You can use the swizzle
command to copy the default Sider
component to your project. This will allow you to customize the sider as you want. Source (https://refine.dev/docs/guides-concepts/faq#using-swizzle-command)
Please note that you need to create the corresponding page for the "/profile" route in your application.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@490961337896402944> kapa.ai is still learning and improving, please let us know how it did by reacting below