extra-lavender•11mo ago

Nesting routes

How can I nest routes on Navbar? Let's say I have: InventoryProducts and InventoryMaterials resources. On navbar I want to have Inventory which itself won't be a resource but will rather show dropdown so user can click on Products or Materials under Inventory.

9 Replies

kapa.ai•11mo ago

Hi @beg1c. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Refine allows you to define nested routes in your application. However, the default Sider component does not support multi-level menus or nested resources. You can define custom routes to create your routes in any shape you want. Here's an example of how you can define a nested resource:

[
  {  
    name: "cms",  
  },  
  {  
    name: "users",  
    list: "/users",  
    create: "/users/create",  
    meta: { parent: "cms" },  
  },  
]

[
  {  
    name: "cms",  
  },  
  {  
    name: "users",  
    list: "/users",  
    create: "/users/create",  
    meta: { parent: "cms" },  
  },  
]

In this example, the users resource is nested under the cms resource. The meta property is used to specify the parent of the users resource. However, for your specific case where you want to have a dropdown in the navbar for Inventory that includes Products and Materials, you might need to create a custom component for the navbar that supports dropdown menus. You can refer to the Refine documentation (https://refine.dev/docs/advanced-tutorials/custom-pages/#public-custom-pages) for more information on how to create custom pages and routes. Please note that the team behind Refine is planning to make changes to the way routing is handled to allow users more freedom in designing their apps, including better support for nested routes and resources. This is expected to be part of a future major release. For more information on how to use nested routes with Refine, you can refer to the Refine documentation on nested routes (https://refine.dev/docs/routing/integrations/remix#can-i-use-nested-routes). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•11mo ago

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

extra-lavenderOP•11mo ago

@kapa.ai How can I specify route for resource call. For resource='materials' I want to call 'inventory/materials'. If i change name to resource='inventory/materials', then it is not shown on sidebar.

kapa.ai•11mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- In Refine, you can specify custom routes for your resources using the resources prop in the <Refine> component. You can define your actions (list, create, edit, show, clone) as paths instead of components. This allows you to define custom routes for actions and take advantage of the full potential of your router without being restricted to the routes created automatically. Here's an example of how you can define a custom route for the list action of the materials resource:

<Refine  
 resources={[  
 {  
 name: "materials",  
 list: "/inventory/materials",  
 // other actions here...
 }  
]}  
/>

<Refine  
 resources={[  
 {  
 name: "materials",  
 list: "/inventory/materials",  
 // other actions here...
 }  
]}  
/>

In this example, the list action for the materials resource will use the /inventory/materials route. However, if you change the name of the resource to inventory/materials, it won't be shown in the sidebar because the <Sider> component uses the resources property of the <Refine> component to render the navigation links, and it expects the name of the resource to be a single word without slashes. For more information on how to use custom routes with Refine, you can refer to the Refine documentation on routing (https://refine.dev/docs/guides-concepts/routing#relationship-between-resources-and-routes-). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•11mo ago

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

extra-lavenderOP•11mo ago

@kapa.ai Is there a way to hide resource from sidebar?

kapa.ai•11mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, you can hide a resource from the sidebar in Refine. This can be done by using the meta.hide property of the resource in the resources prop of the <Refine> component. Here's an example of how you can hide a resource from the sidebar:

<Refine  
 resources={[  
 {  
 name: "users",  
 list: "/users",  
 meta: {  
 // Users resource will be hidden from the menu but will be accessible via the URL  
 hide: true,  
 },  
 },  
 ]}  
 />

<Refine  
 resources={[  
 {  
 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 sidebar, but it will still be accessible via the URL. For more information on how to hide resources from the sidebar, you can refer to the Refine documentation on the <Refine> component (https://refine.dev/docs/core/refine-component#meta). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•11mo ago

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

stormy-gold•11mo ago

Hello @beg1c ,   kapa.ai is now available for free at https://refine.dev/docs! To improve our community interaction on the Refine Discord server and keep our focus on Q&A sharing, we invite you to our website to use kapa.ai. —

Nesting routes

Did you find this page helpful?