---------------------- 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 `` component. The `` 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: ```jsx import { Refine } from "@refinedev/core"; ; ``` 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** () 2. **Using `render` property of `` component**: You can use the `render` property of the `` component. The `render` property is a function that receives an object with the `items` and `logout` properties. Here is an example: ```jsx import { Layout, Sider } from "@refinedev/antd"; const CustomSider = () => { return ( { return ( <> 👤 Profile {items} {logout} ); }} /> ); }; const CustomLayout = () => { return ...; }; ``` 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** ()

How to add custom navigation item to sider in antd design

Similar Threads

Similar Threads

Similar Threads