Multi level menu without nested URL
I am using the following document to create nested items in the sidebar, but the URL of the nested items is always having the name of the parent item.
https://refine.dev/docs/advanced-tutorials/multi-level-menu/
Nested Item in the sidebar:
CMS -> posts
Actual URL:
<root>/cms/posts
Expected URL:
<root>/posts
I have already used the 'options: { route: "posts" }' in the nested element.
6 Replies
sensitive-blue•2y ago
Unfortunately, we do not have a feature that supports this. I couldn't find workaround either.
But I have a radical idea.
If I understand correctly, you want to categorize the sider regardless of the route, right?
you can achieve this with custom sider.
you can follow this code.
https://refine.dev/docs/examples/customization/customSider/
and for starting point, you can swizzle your <Sider> component. https://refine.dev/docs/packages/documentation/cli/#swizzle
ambitious-aqua•2y ago
Yes, I want to categorize the items in sider.
I will look in the custom sider and get back to you. Thanks
You can also try the custom pages feature @Hanif Mianjee
https://refine.dev/docs/advanced-tutorials/custom-pages/
Custom Pages | refine
This document is related to how to create custom pages for react applications. Since Nextjs and Remix has a file system based router built on the page concept, you can create your custom pages under the pages or routes folder.
ambitious-aqua•2y ago
Already using a custom page for some of the routes.
Custom sider can be used because the menuItems are generated using useMenu(). and it is already constructing the nested URLs
sensitive-blue•2y ago
my idea is to do it without using multi level menu (parentName etc.). That's why I say radical 😄
You can get all routes and resource from useMenu() and categorize it yourself.
unfortunately in current implementation multi level menu changes the route
ambitious-aqua•2y ago
😄
Thanks