Skip to content

Unable to use router link on parent items on menu #3284

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
leivdimaria opened this issue May 23, 2025 · 0 comments
Open

Unable to use router link on parent items on menu #3284

leivdimaria opened this issue May 23, 2025 · 0 comments

Comments

@leivdimaria
Copy link

I have a dynamic list of categories, with subcategories. Nebular's menu convert all parents instantly to toggles, erasing all props. Only last level childs mantain router.link prop.

I need to tweak the template from

<a
  *ngIf="menuItem.children"
  (click)="$event.preventDefault(); onToggleSubMenu(menuItem)"
  [attr.target]="menuItem.target"
  [attr.title]="menuItem.title"
  [attr.aria-expanded]="menuItem.expanded ?? false"
  [attr.role]="menuItem.ariaRole"
  [class.active]="menuItem.selected"
  (mouseenter)="onHoverItem(menuItem)"
  href="#"
>
  <nb-icon class="menu-icon" [config]="menuItem.icon" *ngIf="menuItem.icon"></nb-icon>
  <span class="menu-title">{{ menuItem.title }}</span>
  <ng-container *ngIf="badge" [ngTemplateOutlet]="badgeTemplate"></ng-container>
  <nb-icon class="expand-state" [icon]="getExpandStateIcon()" pack="nebular-essentials"></nb-icon>
</a>

to

<a
  *ngIf="menuItem.children"
  (click)="onToggleSubMenu(menuItem)"
  [attr.target]="menuItem.target"
  [attr.title]="menuItem.title"
  [attr.aria-expanded]="menuItem.expanded ?? false"
  [attr.role]="menuItem.ariaRole"
  [class.active]="menuItem.selected"
  [routerLink]="menuItem.link"
  (mouseenter)="onHoverItem(menuItem)"
>
  <nb-icon class="menu-icon" [config]="menuItem.icon" *ngIf="menuItem.icon"></nb-icon>
  <span class="menu-title">{{ menuItem.title }}</span>
  <ng-container *ngIf="badge" [ngTemplateOutlet]="badgeTemplate"></ng-container>
  <nb-icon class="expand-state" [icon]="getExpandStateIcon()" pack="nebular-essentials"></nb-icon>
</a>

Unchanged code can be found on several folders inside the library.

  • @nebular/theme/components/menu/menu-item.component.html
  • @nebular/theme/esm2020/components/menu/menu.component.mjs
  • @nebular/theme/fesm2015/nebular-theme.mjs
  • @nebular/theme/fesm2020/nebular-theme.mjs

However i tried different approaches

  • Extending the menu component (got error's saying menu-item component has no public classes or something like that)
  • Using patch-package (no matter where i apply the change,delete cache, node_modules, etc. when i run build, i can see that the babel compiled files display no changes)
  • Hooking to the toggle event and add a redirect (this causes funny unwanted behaviours on first loads)
  • Creating a custom component based on the original code in the github (there are so much things linked, i basically have to end up importing almost the entire library again)
  • This would be easy to fix if i had fixed/limited options for the menu, but as these are dynamic, it's not possible.

Any tips or hints on how to achive these in an organic way? can't find any info on the docs, and reviewed some posts here, however was unable to unblock myself with this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant