compatible-crimson
compatible-crimsonโ€ข17mo ago

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
fascinating-indigo
fascinating-indigoโ€ข17mo ago
Multi Level Menu | refine
This document is related to how to create a multi-level menu for refine applications.
compatible-crimson
compatible-crimsonโ€ข17mo ago
This doesnt document dynamic multi level menus.
environmental-rose
environmental-roseโ€ข17mo 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-salmon
extended-salmonโ€ข10mo 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? ๐Ÿ™
environmental-rose
environmental-roseโ€ข10mo 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-salmon
extended-salmonโ€ข10mo ago
Thanks @aliemirs , Let me try these options and I will let you results/issues