extended-salmon•6mo ago

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

kapa.ai•6mo ago

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:

import { Refine } from "@refinedev/core";  
  
<Refine  
 ...  
 resources={[  
 {  
 name: "profile",  
 list: "/profile",  
 meta: {  
 label: "Profile",  
 icon: "👤",  
 },  
 },  
 ]}  
/>;

import { Refine } from "@refinedev/core";  
  
<Refine  
 ...  
 resources={[  
 {  
 name: "profile",  
 list: "/profile",  
 meta: {  
 label: "Profile",  
 icon: "👤",  
 },  
 },  
 ]}  
/>;

import { Layout, Sider } from "@refinedev/antd";  
  
const CustomSider = () => {  
 return (  
 <Sider  
 render={({ items, logout }) => {  
 return (  
 <>  
 <a href="/profile">👤 Profile</a>  
 {items}  
 {logout}  
 </>  
 );  
 }}  
 />  
 );  
};  
  
const CustomLayout = () => {  
 return <Layout Sider={CustomSider}>...</Layout>;  
};

import { Layout, Sider } from "@refinedev/antd";  
  
const CustomSider = () => {  
 return (  
 <Sider  
 render={({ items, logout }) => {  
 return (  
 <>  
 <a href="/profile">👤 Profile</a>  
 {items}  
 {logout}  
 </>  
 );  
 }}  
 />  
 );  
};  
  
const CustomLayout = () => {  
 return <Layout Sider={CustomSider}>...</Layout>;  
};

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: ----------------------

kapa.ai•6mo ago

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