resources

I want to add menus in resources but i do not want to show it in my sidebars how to do it?

8 Replies

kapa.ai•14mo ago

Hi @dc_alexyt. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You can add resources to your application and hide them from the sidebar by using the meta.hide property of the resource. This property allows you to hide a resource from the menu. Here's an example:

import { Refine } from "@refinedev/core";  
  
const App = () => (  
 <Refine  
 ...  
 resources={[  
 {  
 name: "posts",  
 list: "/posts",  
 meta: {  
 label: "Posts",  
 icon: "📝",  
 },  
 },  
 {  
 name: "users",  
 list: "/users",  
 meta: {  
 // Users resource will be hidden from the menu but will be accessible via the URL  
 hide: true,  
 },  
 },  
 ]}  
 />  
);

import { Refine } from "@refinedev/core";  
  
const App = () => (  
 <Refine  
 ...  
 resources={[  
 {  
 name: "posts",  
 list: "/posts",  
 meta: {  
 label: "Posts",  
 icon: "📝",  
 },  
 },  
 {  
 name: "users",  
 list: "/users",  
 meta: {  
 // Users resource will be hidden from the menu but will be accessible via the URL  
 hide: true,  
 },  
 },  
 ]}  
 />  
);

In this example, the "users" resource will be hidden from the menu but will still be accessible via the URL[^1^]. You can also use the useMenu hook and <Sider /> components to render the navigation links[^1^]. If a resource has a list property, it will be rendered as a navigation link in the sider[^1^]. [^1^]: (source: https://refine.dev/docs/guides-concepts/faq#how-to-hide-items-from-the-sider-component) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•14mo ago

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

afraid-scarletOP•14mo ago

@kapa.ai in resources i have only name and icon but i want to show that in the side bar how can i do it?

kapa.ai•14mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To add an item to the sidebar using the resources property, you need to define a list property for the resource. The <Sider /> component shows the resources whose list property is set. Here's an example:

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

In this example, a resource named "dashboard" is added to the sidebar with a label "Dashboard" and an icon "🏠". The list property is set to "/", which means this resource will be linked to the root URL of your application[^1^]. [^1^]: (source: 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•14mo ago

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

afraid-scarletOP•14mo ago

@kapa.ai I do not want the list because there is no list for it it bu it has children property. I want to hide the children but show the parent in the sidebar

kapa.ai•14mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To create a parent item in the sidebar without a list, you can simply define a resource with a name and no list property. Then, for each child resource, you can use the meta.parent property to specify the parent resource and meta.hide to hide them from the sidebar. Here's an example:

<Refine  
 ...  
 resources={[  
 {  
 name: "CMS",  
 },  
 {  
 name: "posts",  
 meta: { parent: "CMS", hide: true },  
 list: "/posts",  
 },  
 {  
 name: "category",  
 meta: { parent: "CMS", hide: true, canDelete: true },  
 list: "/categories",  
 },  
 ]}  
 />

<Refine  
 ...  
 resources={[  
 {  
 name: "CMS",  
 },  
 {  
 name: "posts",  
 meta: { parent: "CMS", hide: true },  
 list: "/posts",  
 },  
 {  
 name: "category",  
 meta: { parent: "CMS", hide: true, canDelete: true },  
 list: "/categories",  
 },  
 ]}  
 />

In this example, "CMS" is a parent resource that will be shown in the sidebar, while "posts" and "category" are child resources that will be hidden from the sidebar[^1^]. [^1^]: (source: https://refine.dev/docs/advanced-tutorials/multi-level-menu#usage) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•14mo ago

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

resources

Did you find this page helpful?