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.
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:
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:
----------------------<@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 and list="/"?
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:
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:
----------------------<@369510721135837184> kapa.ai is still learning and improving, please let us know how it did by reacting below