I want that nested NavLink menus are opened (uncollapsed) according to current route path. This is a use case if a link in the app leads to another page, which has a corresponding menu entry route or if a user opens such a page directly via URL. I haven't found any information on that issue on the Mantine website or at Github discussions.
#How to open (uncollapse) nested NavLink menus according to route path in NextJS 14?
sturdy tundra
short citrus
Can you toggle active state based on router.path or similar ?
I think we do similar here.
active={router.pathname === '/admin/announcements'}
for nested routes you just swap '===' for router.pathname.startsWith()
sturdy tundra
That's what, I've tried, but it was a React server component. Seems to be difficult to get current path in a RSC, so I moved navigation into a client component. If you try the same with "opened" instead of "active" one has also to manage opened/closed state outside of NavLink component. Otherwise you can't "uncollapse" menu levels by clicking on menu items, but only by navigating directly to the URL as "opened" is directly attached to pathname and nothing else. So moving it to a client component, build some state management around navlinks and utilize onClick events for state changes, should do the work. That's kind of unexpected effort, but it's doable and at least a flexible approach. Mantine is still awesome!