Show parent Nav as active as well

[gazi786]

Discussed in #4534

^{Originally posted by gazi786 December 12, 2024}
If a dependent route is selected how can I make the parent nav active as well. That is have the Mui-selected class attached to the parent node as well.

Also goes in a parent link has a grandchild all three should be shown active.

This is more of a feature request rather then an issue.

Search keywords:

[Janpot]

I feel like this could probably benefit from a bit more discussion and benchmarking before we implement a solution? Personally I'm not fully convinced that making this configurable should be part of Toolpad public API. It feels like for this level of customizability, a slot for the whole navigation menu allows you to write a custom version that behaves exactly as you want without burdening the library with extra complexity.

[gazi786]

Agreed... a slotProp to assign the Mui-selected class to the parents of the related selected child. Since the AppProvider's NavigationContext renders the navigation, I have tried to push a state through redux to the AppProvider but have been unsuccessful at the moment.

Still a learning curve for me.

The DashboardLayout component controls many actions for the dashboard. I'm trying to look into how the side nav gets rendered.

[gazi786]

Since the navigation is recursively rendered using the component:

<DashboardSidebarSubNavigation
        subNavigation={navigation}
        onLinkClick={handleNavigationLinkClick}
        isMini={isMini}
        isFullyExpanded={isNavigationFullyExpanded}
        hasDrawerTransitions={hasDrawerTransitions}
        selectedItemId={selectedItemIdRef.current}
      />

in the DashboardLayout component...

So, would it be easy to add a prop, say, isParentActive, that adds the Mui-selected class to the Parent or even use the selectedItemId reference?