Dynamic Multi-level Menus support?
The docs states that Refine has dynamic multilevel menu support, but I cant seem to find any documentation on this. https://refine.dev/docs/comparison/
Comparison | Refine vs React-Admin vs AdminBro vs Retool vs Redwood...
This comparison table strives to be as accurate and as unbiased as possible. If you use any of these libraries and feel the information could be improved, feel free to suggest changes (with notes or evidence of claims) using the "Edit this page" link at the bottom of this page.
6 Replies
firm-tan•2y ago
Multi Level Menu | refine
This document is related to how to create a multi-level menu for refine applications.
deep-jade•2y ago
This doesnt document dynamic multi level menus.
optimistic-gold•2y ago
Hey @los._.ko, can you explain your use case a bit more?
Refine provides a multi-level menu support with built-in access-control support based on your resources. The content of the sider will change when your resources has changed.
If you can share your case, I'll be happy to help 🙏
rival-black•13mo ago
Hi @aliemirs , I am also looking for a dynamic menu, basically I wanted to change my menu bar based on the menu user has selected ..e.g. If I have a top menu as projects and the user selects the Project menu then I wanted to replace the menu bar with all the menus related to Project (instead of multi-level under scheme) . Is it possible ? Is any example available? 🙏
optimistic-gold•13mo ago
Hey @veepraj, that's a good use case I think we should add this as an example as well 😅 This can be done in multiple ways, let me quickly list them with pros and cons;
Changing
resources
Programatically changing the resources
prop of <Refine>
can make useMenu
and <Sider>
components to automatically change the menu items. Instead of removing items from the resources
array, you can set meta.hide
property to true
to hide them in the menu.
Using Access Control
You can pass an accessControlProvider
prop to <Refine>
and decide which resources can have the list
permission for each resource;
If you already have an accessControlProvider
you might not want to tweak it just for this cause but if you don't have one, it might be a good solution for your use case.
Resource's name is passed to the can
function with action
and other parameters, you can check for the project value and return false
for the list
actions which will hide the menu items for that resource.
Customizing <Sider>
I think this is the most non-trivial one, you can run refine swizzle
command to export the sider component from the refine package and customize the rendered items as you like according to some state or anything.
Hope this helps
Let us know if you have any issues 🚀rival-black•13mo ago
Thanks @aliemirs , Let me try these options and I will let you results/issues