Show parent Nav as active as well

[coderchef26]

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.

[apedroferreira]

Hi, you should be able to make it work with navigation pattern matching? https://mui.com/toolpad/core/react-dashboard-layout/#navigation-pattern-matching

Otherwise feel free to share your specific configuration!

[coderchef26]

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 to implement the logic?

[coderchef26]

Hi, you should be able to make it work with navigation pattern matching? https://mui.com/toolpad/core/react-dashboard-layout/#navigation-pattern-matching

Otherwise feel free to share your specific configuration!

trying this but pattern changing the url.

Do I have to add the paths to my createBrowserRouter?

https://codesandbox.io/p/sandbox/dazzling-taussig-y7ld4c?from-embed=

[coderchef26]

Got it using pattern matching; we can achieve what I was after. Just play around with the regex patterning.

[coderchef26]

Hi, you should be able to make it work with navigation pattern matching? https://mui.com/toolpad/core/react-dashboard-layout/#navigation-pattern-matching

Otherwise feel free to share your specific configuration!

if working with react-router

set your route...

dynamic route:

const RedirectToSync = () => <Navigate to="sync" replace />; const baseRoutes = [ { path: '', component: Dashboard, isPrivate: true, hideTabs: true }, { path: '/', component: Dashboard, isPrivate: true, hideTabs: true }, { path: '/utilities', component: Utilities, isPrivate: true, hideTabs: true, children: [ { path: '', component: RedirectToSync }, { path: 'sync', component: SyncRefresh }, { path: 'reset', component: Reset } ] } ];

In your component:

const UtilitiesContainer = () => { let navigate = useNavigate(); const location = useLocation(); const parentPath = location.pathname.startsWith('/utilities'); const activeTab = location.pathname.split('/').pop(); const handleTabChange = (tab) => { navigate(`/utilities/${tab}`); }; return ( <Grid container spacing={2} size={12}> {/* Vertical Tabs */} <Grid size={{ xs: 12, lg: 3 }}> <AppBar className="container-appbar"> <Toolbar className="container-toolbar"> <Typography variant="h6" noWrap> Tools </Typography> </Toolbar> </AppBar> <Paper elevation={2} sx={{ borderRadius: '5px', px: 0 }}> {parentPath && ( <List className="container-nav-list" orientation="vertical" //value={currentTab} // Track the current path aria-label="Utility Navigation" sx={{ borderRight: 1, borderColor: 'divider' }}> {utilitiesNavigation.map((nav, index) => ( <Box key={index}> <ListItem className="container-nav"> <ListItemButton className={`container-nav-item ${  activeTab === nav.actionTab ? 'Mui-selected' : ''  }`} selected={activeTab === nav.actionTab} onClick={() => handleTabChange(nav.actionTab || 'sync') }> <ListItemIcon>{nav.icon}</ListItemIcon> <ListItemText primary={nav.label} secondary={nav.description} /> {activeTab === nav.actionTab && ( <ArrowForwardIosOutlinedIcon sx={{ marginLeft: 'auto' }} /> )} </ListItemButton> </ListItem> <Divider component="li" sx={{ width: '100%' }} /> </Box> ))} </List> )} </Paper> </Grid> <Grid size={9} sx={{ flex: 1 }}> <Paper elevation={2} sx={{ borderRadius: '5px' }}> <AppBar className="container-appbar"> <Toolbar className="container-toolbar"> <Typography variant="h6" noWrap> { utilitiesNavigation.find((nav) => activeTab === nav.actionTab) ?.label } </Typography> </Toolbar> </AppBar> <Outlet /> </Paper> </Grid> </Grid> ); }; UtilitiesContainer.displayName = 'UtilitiesContainer'; export default UtilitiesContainer; //Navigation that goes into AppProvider <AppProvider navigations:{{ kind: 'header', title: 'Application Tools' }, { segment: 'utilities', title: 'Utilities', icon: <BuildOutlinedIcon />, pattern: 'utilities{/:actionTab}*' }}