extended-salmon
extended-salmon•3mo 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
kapa.ai•3mo 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: "👤",
},
},
]}
/>;
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:
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
kapa.ai•3mo ago
<@490961337896402944> kapa.ai is still learning and improving, please let us know how it did by reacting below