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.

[gianluca-moro]

I am currently facing a similar issue after migrating from PrimeNG 17 to 18. With v17, the current active route would be highlighted in the Menu. But now with v18, no menu item is being highlighted at all.

[Dashti81]

Hi,

I'm using v21 and this issue persists. While PrimeNG's documentation includes variables for this state, they aren't connected to the .p-menubar-item-link-active class.
I resolved this by adding the following code to my style.css file:

.p-menubar-item-link-active {
  --p-menubar-item-active-background: /*your color here*/
  --p-menubar-item-active-border.radius: /*your size here*/ <== I missed this one (custom variable)
  
  background-color: var(--p-menubar-item-active-background);
  border-radius: var(--p-menubar-item-active-border.radius);
}