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?

[prakhargupta1]

I checked a few tools and docs that have nested navigation and found that most of them don't show the parent as selected. Two of those who do this:

1. https://e2b.dev/docs
2. Google Analytics (but Gmail doesn't :p)

As per the linked discussion, @gazi786 managed to resolve this for their use case. I have added 'waiting for upvotes' label to see if more users want this.

[gazi786]

@prakhargupta1 thats what I have checked.. Alot of the apps don't show the parent Nav active. It usually suits when we working with top navigation.

If we get a good number of feedback perhaps we can include it in a later release.

Thanks for the awesome feedback and support.

[prakhargupta1]

Thanks for the awesome feedback and support.

@gazi786 Thanks for explaining the issue well. From the screenshots you shared, I can see that the dashboard is coming along well. In case you need any help or discuss a problem, feel free to schedule a call.

[gazi786]

Thanks mate will do...