nebular menu parent active class not working

Question

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.

Appertain

Actually, No... – Appertain

It would be helpful if you could create a Minimal Sample StackBlitz replicating this issue. – Bigamous

Hi SiddAjmera, I have tried to make sample but its not working but somehow tried to write code as per my application. stackblitz.com/edit/angular-rcmqs4. I hope it will help you to understand – Appertain

@RakeshSingh did you find any solution for it? – Moreen

Answer 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

Bevel

Answer 2

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,
      ),
  },

Berna

Answer 3

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. :)

Fallfish

Answer 4

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"

  },

]
 },

Alvita

Answer 5

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

1. The link property of an NbMenuItem should be prefixed with /.
2. The items attribute that we pass to the <nb-menu> element should be initialized from the beginning.
   See the next paragraph to bypass this requirement. Details/reason for the above is: 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 this component needs the menu items during the ngOnInit phase.

If initialising the menu items from the start is not an option, you need to set the parent property of each child by yourself. Following setParent function takes an item and sets its children's parents.

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

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

Lachlan

Answer 6

please use this.

menus: NbMenuItem[] = []; 
this.menuService.addItems(items['data'],'menu');

<nb-menu tag="menu" [items]="menus"></nb-menu>

Interstate