Add navigation items

dead-brown · 2023-12-27T18:08:11.836Z

How to add a new navigation items? I want to add a navigation item that redirect user to my page, how can I do that?

K

kapa.ai•12/27/23, 6:08 PM

Hi @tandeptraiso1. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

K

kapa.ai•12/27/23, 6:08 PM

----------------------
There are three ways to add an extra navigation link to the sider in refine.

The first and simplest way is to use the
```
resources
```
resources
```
resources
```
resources
property on the
```
<Refine>
```
```
<Refine>
```
component. The
```
<Sider>
```
<Sider>
```
<Sider>
```
<Sider>
component shows the resources whose
```
list
```
list
```
list
```
list
property is set. So, you can have an extra navigation link by adding a resource with the
```
list
```
list
```
list
```
list
attribute.

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

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

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

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

The second way is to use the
```
render
```
```
render
```
property of the
```
<Sider>
```
<Sider>
```
<Sider>
```
<Sider>
component. The
```
render
```
```
render
```
property is a function that receives an object with the
```
items
```
items
```
items
```
items
and
```
logout
```
```
logout
```
properties. The
```
items
```
items
```
items
```
items
property is the list of navigation items and the
```
logout
```
```
logout
```
property is the logout button.

Here is an example with Ant Design:

import { Layout, Sider } from "@refinedev/antd";  
  
const CustomSider = () => {  
 return (  
 <Sider  
 render={({ items, logout }) => {  
 return (  
 <>  
 <a href="<https://refine.dev/">👋> Navigation Link</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="<https://refine.dev/">👋> Navigation Link</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="<https://refine.dev/">👋> Navigation Link</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="<https://refine.dev/">👋> Navigation Link</a>  
 {items}  
 {logout}  
 </>  
 );  
 }}  
 />  
 );  
};  
  
const CustomLayout = () => {  
 return <Layout Sider={CustomSider}>...</Layout>;  
};

You can find more information about this in the Refine documentation (https://refine.dev/docs/guides-concepts/faq#how-can-i-add-an-item-to-the-sider-component).
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

K

kapa.ai•12/27/23, 6:08 PM

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

D

dead-brownOP•12/27/23, 6:50 PM

@kapa.ai can I do

name="name/dashboard"

name="name/dashboard"

name="name/dashboard"

name="name/dashboard"

and list="/"?

K

kapa.ai•12/27/23, 6:50 PM

Let me check the knowledge base for you. One moment!

K

kapa.ai•12/27/23, 6:50 PM

----------------------
Yes, you can set the

name

name

property to

"name/dashboard"

"name/dashboard"

"name/dashboard"

"name/dashboard" in the

resources

resources

resources

resources prop of the

<Refine>

<Refine>

component. However, the

name

name

property is typically used to identify the resource and is not directly related to the navigation link. The navigation link is determined by the

list

list

list

list property. Here's an example:

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

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

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

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

In this example, a navigation link labeled "Dashboard" with an icon of "

" will be added to the sidebar. When clicked, it will redirect the user to the root ("/") of your application.

Remember that the

list

list

list

list property should correspond to the route of your page in your application. If you want the navigation link to redirect to a different page, you should adjust the

list

list

list

list property accordingly.
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

K

kapa.ai•12/27/23, 6:50 PM

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