Page 1 of 1

p-menubar highlight parent when children are clicked

Posted: 04 Mar 2019, 15:45
by 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']
    }
];

Re: p-menubar highlight parent when children are clicked

Posted: 05 Mar 2019, 08:53
by yigitfindikli
csliston wrote:
04 Mar 2019, 21:09
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.

Re: p-menubar highlight parent when children are clicked

Posted: 10 Jul 2019, 11:28
by 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?