PanelMenu active route is not highlighting

[vichustephen]

Hi ,

I'm using prime-ng angular version 17 (both).
So im trying to use sidebar with panelmenu. I would like to highlight the menu when it is clicked or if its in the route. I just want to know this, Does the PanelMenu component highlight the current menu or submenu that's in the route by default ? if yes its not working. Here is the code.

    this.items = [
      {
        label: "sales",
        items:
          [
            {
              label : "sale orders",
              routerLink:["/app/sales/sale-orders"],
              routerLinkActiveOptions: { exact: true },
            }
          ]
      },
      {
        label: "inventory",
        routerLink: ['inventory']
      }
    ]
  }

am i doing something wrong

[cetincakiroglu]

Hi,

Sorry for the latency, could you please share a stackblitz example so we can identify the issue?

[AlNistor]

I seem to have the same problem.

Even if we specify the routerLink: "/app/sales" and the routerLinkActiveOptions: {exact : true}, if I go directly to the route {base_URL}/app/sales, the Menu Item which matches the exact routeLink is not being activated.

[Askeiter]

After almost a year the problem continues

I have a menu created with the menu panel component, and navigation is done with a router link, and I also have the router link options configured.

 this.items = [{
        label: 'Automations',
        expanded: true,
        disabled: true,
        items: [
          {
            label: 'Pricing Strategies',
            iconClass: 'material-symbols-outlined',
            icon: 'strategy',
            routerLink: '/rules/strategy',
            routerLinkActiveOptions: { exact: true },
          },
          {
            label: 'Pricing Rule',
            iconClass: 'pi pi-sliders-v',
            routerLink: '/rules/pricing',
            routerLinkActiveOptions: { exact: true },
          },
          {
            label: 'Allotment Rule',
            iconClass: 'pi pi-sliders-h',
            routerLink: '/rules/allotments',
            routerLinkActiveOptions: { exact: true },
          },
          {
            label: 'Pax Grid',
            iconClass: 'pi pi-user-edit',
            routerLink: '/rules/paxes',
            routerLinkActiveOptions: { exact: true },
          },
      ],
}]

    <p-panelMenu [model]="items" styleClass="h-auto w-full">
      <ng-template pTemplate="item" let-item>
        @if(item.label!=='Report'){
        <a [routerLink]="item.routerLink" [class.slim]="!isOpenMenu" class="menu-link flex align-items-center 
          cursor-pointer text-color px-3 py-2">
          <span [class]="item.iconClass">{{item.icon}}</span>
          <span class="ml-2 text-color">{{ item.label }}</span>
        </a>
        } @else {
        <a [href]="reporting()" target="_blank" class="menu-link flex align-items-center 
          cursor-pointer text-color px-3 py-2">
          <span [class]="item.iconClass">{{item.icon}}</span>
          <span class="ml-2 text-color">{{ item.label }}</span>
        </a>
        }
      </ng-template>
    </p-panelMenu>

When I hover over the option or click, the highlighting works correctly and the option stays highlighted.

but when i click outside the menu the highlight is lost

[vichustephen]

Guys it seems to be an issue. It seems like they don't care about the issue. I have moved on and implemented my own menu in a very simple way. Though note that it works on older primer ng version

[ferzamo]

I don't know if this is the way we're expected to do it, but in my case the class "p-panelmenu-item-link-active" was being correctly added to the element.

Overwritting the class seems to work.