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
absent-sapphire•2y ago
Multi Level Menu | refine
This document is related to how to create a multi-level menu for refine applications.
xenial-blackOP•2y ago
This doesnt document dynamic multi level menus.
grumpy-cyan•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 🙏
extended-yellow•2y 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? 🙏
grumpy-cyan•2y 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 🚀extended-yellow•2y ago
Thanks @aliemirs , Let me try these options and I will let you results/issues