flat-fuchsia•2y 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•2y 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•2y ago

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

How to add custom navigation item to sider in antd design

Did you find this page helpful?