i'm using nebular in my angular front application , and want to set the active link selected . how can i achieve it ?
I've tried with the selected property of the menuItem but it's applied only on the item object and there is no [routerLinkActive] option
@Component({
selector: 'nebular-pages',
styleUrls: ['nebular.component.scss'],
template: `
<ngx-sample-layout>
<nb-menu [items]="menu"></nb-menu>
<router-outlet></router-outlet>
</ngx-sample-layout>
`,
})
export class NebularComponent {
menu: NbMenuItem[];
constructor() { }
this.menu = [
{
title: 'Page1',
link: `/user/params`,
icon: 'nb-grid-b-outline',
home: true,
},
{
title: 'Page2',
link: '/user/options',
icon: 'nb-arrow-thin-right',
},
{
title: 'Page3',
icon: 'nb-list',
children:[
{
title: 'Costs',
link: '/user/costs',
icon: 'nb-arrow-thin-right',
},
{
title: "Benifits",
link: "/user/benifits",
icon: "nb-compose"
},
]
},
];
Try adding pathMatch:'full' to the menu items
items: NbMenuItem[] = [
{
title: 'Login',
icon: 'person-outline',
link: '/login',
pathMatch:'full'
},
{
title: 'Register',
icon: 'lock-outline',
link: '/register',
pathMatch:'full'
},
{
title: 'Logout',
icon: 'unlock-outline',
link: '/logout',
pathMatch:'full'
},
];
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With