Add navigation items

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?

5 Replies

Hi @tandeptraiso1. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- There are three ways to add an extra navigation link to the sider in refine. 1. The first and simplest way is to 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.

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: "🏠",  
 },  
 },  
 ]}  
/>;

2. The second way is to use the render property of the <Sider> component. The render property is a function that receives an object with the items and logout properties. The items property is the list of navigation items and the 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>;  
};

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

kapa.ai•9mo ago

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

optimistic-gold•9mo ago

@kapa.ai can I do

name="name/dashboard"

name="name/dashboard"

and list="/"?

kapa.ai•9mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, you can set the name property to "name/dashboard" in the resources prop of the <Refine> component. However, the 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 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: "🏠",  
 },  
 },  
 ]}  
/>;

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 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 property accordingly. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•9mo ago

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