p-menubar highlight parent when children are clicked

[csliston]

Hi,
I am using p-menubar for my navigation. I like the highlight when clicking on the parent node but when you click on a child it looks like nothing is select because all of the parents are not highlighted. How can I make the parent highlight when the child is selection. In this case Data highlighted when Protocol Data is selected.

Code: Select all

<p-menubar [model]="items" [style]="{'margin-left': '310px', 'padding-top': '10px', 'height' : '65px', 'border' : '0', 'border-radius': '0px'}">
    <button pButton label="Logout" icon="pi pi-fw pi-sign-out"></button>
</p-menubar>

this.items = [
    {
    label: 'Home',
    icon: 'pi pi-fw pi-home',
    routerLink': ['/home']
    },
    {
    label: 'Login',
    icon: 'pi pi-fw pi-sign-in',
    visible: !this.app.authenticated,
    'routerLink': ['/login'],
    },
    {
    label: 'Data',
    icon: 'fa fa-database',
    'routerLink': ['/data'],
    items: [ {label: 'Protocol Data', 'routerLink': ['/dataProtocol']} ]
    },
    {
    label: 'Reports',
    icon: 'fa fa-table',
    'routerLink': ['/reports']
    }
];

[yigitfindikli]

Hi,
I would like to have the root node of the menu highlight alone with the submenu. That way when the menus are collapse you know which menu group you are in. So if I click on Protocol Data I would like both Data and Protocol Data to be highlighted, is this possible?

Code: Select all

navbar-component.html
<p-menubar [model]="items" [style]="{'margin-left': '310px', 'padding-top': '10px', 'height' : '65px', 'border' : '0', 'border-radius': '0px'}">
    <button pButton label="Logout" icon="fa fa-sign-out"></button>
</p-menubar>

navbar-component.ts
this.items = [
    {
        label: 'Home',
        icon: 'fa fa-home',
        'routerLink': ['/home']
    },
    {
        label: 'Login',
        icon: 'fa fa-sign-in',
        visible: !this.app.authenticated,
        'routerLink': ['/login'],
    },
    {
        label: 'Data',
        icon: 'fa fa-database',
         'routerLink': ['/data'],
        items: [
        {label: 'Protocol Data', 'routerLink': ['/dataProtocol']}
    ]
    },
    {
        label: 'Reports',
        icon: 'fa fa-table',
        'routerLink': ['/reports']
    }
];
        
app.module.ts
const routes: Routes = [
    { path: '', pathMatch: 'full', redirectTo: 'home' },
    { path: 'home', component: HomeComponent },
    { path: 'login', component: LoginComponent },
    { path: 'data', component: DataHomeComponent },
    { path: 'dataProtocol', component: DataProtocolComponent },
    { path: 'reports', component: ReportsComponent }
    // , { path: 'reportsforecast', component: ReportsForecastComponent }
];

        

Hi,
I am not sure, maybe you can use routerLinkActiveOptions {exact:true} like that;

Code: Select all

const routes: Routes = [
    { path: '', pathMatch: 'full', redirectTo: 'home', routerLinkActiveOptions: {exact:true} },
    { path: 'home', component: HomeComponent, routerLinkActiveOptions: {exact:true} },
    { path: 'login', component: LoginComponent, routerLinkActiveOptions: {exact:true}},
    { path: 'data', component: DataHomeComponent, routerLinkActiveOptions: {exact:true}},
    { path: 'dataProtocol', component: DataProtocolComponent, routerLinkActiveOptions: {exact:true} },
    { path: 'reports', component: ReportsComponent, routerLinkActiveOptions: {exact:true}}
    // , { path: 'reportsforecast', component: ReportsForecastComponent, routerLinkActiveOptions: {exact:true}}
];

Best Regards.

[ireneusz.budzowski]

Make use of routerLink and routerLinkActiveOptions is a great idea.
But what to do, if the parent shouldn't have routerLink? Can we disable somehow route update?