'nebular menu parent active class not working

I am using nebular with Angular 6, facing an issue while clicking on menu item , active class on parent menu item not added. but if you see the http://akveo.com/ngx-admin, while you click on ""buttons" inside "UI-features" them UI-features get highlighted.

Below is my JSON file:

[
    {
        "title": "Dashboards",
        "icon": "font_icons8 icons8-statistics",
        "link": "/dashboard",
        "home": true
    },
    {
        "title": "UI Features",
        "icon": "font_icons8 icons8-data-configuration",
        "link": "/ui-features",
        "children": [
            {
                "title": "Typography",
                "link": "/ui-features/typography"
            },
            {
                "title": "Grid",
                "link": "/ui-features/grid"
            }
        ]
    },
]

Please help me get rid of this issue.

Solution 1:^[1]

in the link property of every single menu item I set the full path of the Item. Previously i was only setting the /componentName instead of the /fullpath/componentName

Solution 2:^[2]

It works you can try this code.

{
title: "Dashboard",
icon: "people-outline",
link: "/dashboard"
 },
 {
title: "Calendar",
icon: "pie-chart-outline",
children: [
  {
    title: "Day-cell",
    link: "/day-cell"

  },

]
 },

Solution 3:^[3]

Just set the pathMath prop of parent with 'prefix' value and give him a link. After this, set a pathMath prop of children with 'full' value.

See my sample works:

{
        title: 'Security',
        icon: 'lock-outline',
        link: '/security',
        pathMatch: 'prefix',
        children: [
          {
            title: 'User',
            pathMatch: 'full',
            link: '/security/user',
            selected: false,
          }]
}

Note: Your routes should be setted with exatcly link of your menu item, like this:

  {
    path: 'security/user',
    loadChildren: () =>
      import('./pages/security/register-user/register-user.module').then(
        (m) => m.RegisterUserModule,
      ),
  },

Solution 4:^[4]

From my experiments and by looking through the nebular source code, what I could find out was:

The link property of an NbMenuItem should be prefixed with /.
The items attribute that we pass to the <nb-menu> element should be initialized from the beginning.
Details/reason for this: There is a private method setParent() that sets the parent attribute of each menu item's children, and this method is only called on ngOnInit of NbMenuComponent .

So, the other solution to this, if initialising the menu items from the start is not an option, is to set the parent property of each child by yourself with the setParent function.


    private setParent(item: NbMenuItem) {
        item.children && item.children.forEach(child => {
          child.parent = item;
          this.setParent(child);
        });
      }

Then call setParent on all the elements of the items list i.e. items.map(item => this.setParent(item))

Solution 5:^[5]

I had the same issue, I solved removing the "/" at the end of the link in the menu item.

Like this:

      {
    title: 'Dashboard',
    icon: 'home-outline',
    link: '/home/',
    home: true,
  },

It doesn't turn blue, I solved with this:

      {
    title: 'Dashboard',
    icon: 'home-outline',
    link: '/home',
    home: true,
  },

I know it's late, but maybe this can help someone else. :)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Daggle
Solution 2	Shubham Yengantiwar
Solution 3	Lucas SimÃµes
Solution 4
Solution 5	Asder999

'nebular menu parent active class not working

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]