diff --git a/src/app/components/panelmenu/panelmenu.ts b/src/app/components/panelmenu/panelmenu.ts
index 1ca8b6a1511..91308de1d4e 100644
--- a/src/app/components/panelmenu/panelmenu.ts
+++ b/src/app/components/panelmenu/panelmenu.ts
@@ -742,7 +742,7 @@ export class PanelMenuList implements OnChanges {
                         (keydown)="onHeaderKeyDown($event, item, i)"
                     >
                         <div class="p-panelmenu-header-content">
-                            <ng-container *ngIf="!headerContentTemplate">
+                            <ng-container *ngIf="!itemTemplate">
                                 <a
                                     *ngIf="!getItemProp(item, 'routerLink')"
                                     [attr.href]="getItemProp(item, 'url')"
@@ -765,7 +765,7 @@ export class PanelMenuList implements OnChanges {
                                     <span class="p-menuitem-badge" *ngIf="getItemProp(item, 'badge')" [ngClass]="getItemProp(item, 'badgeStyleClass')">{{ getItemProp(item, 'badge') }}</span>
                                 </a>
                             </ng-container>
-                            <ng-container *ngTemplateOutlet="headerContentTemplate; context: { $implicit: item }"></ng-container>
+                            <ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: item }"></ng-container>
                             <a
                                 *ngIf="getItemProp(item, 'routerLink')"
                                 [routerLink]="getItemProp(item, 'routerLink')"
@@ -894,8 +894,6 @@ export class PanelMenu implements AfterContentInit {
 
     submenuIconTemplate: TemplateRef<any> | undefined;
 
-    headerContentTemplate: TemplateRef<any> | undefined;
-
     itemTemplate: TemplateRef<any> | undefined;
 
     public animating: boolean | undefined;
@@ -909,10 +907,6 @@ export class PanelMenu implements AfterContentInit {
     ngAfterContentInit() {
         this.templates?.forEach((item) => {
             switch (item.getType()) {
-                case 'headercontent':
-                    this.headerContentTemplate = item.template;
-                    break;
-
                 case 'submenuicon':
                     this.submenuIconTemplate = item.template;
                     break;
diff --git a/src/app/showcase/doc/panelmenu/routerdoc.ts b/src/app/showcase/doc/panelmenu/routerdoc.ts
index 1cc14414057..679c0a2a53d 100644
--- a/src/app/showcase/doc/panelmenu/routerdoc.ts
+++ b/src/app/showcase/doc/panelmenu/routerdoc.ts
@@ -12,25 +12,25 @@ import { Router } from '@angular/router';
         <div class="card flex justify-content-center">
             <p-panelMenu [model]="items" styleClass="w-full md:w-20rem">
                 <ng-template pTemplate="item" let-item>
-                    <ng-container *ngIf="item.route">
+                    <ng-container *ngIf="item.route; else urlRef">
                         <a [routerLink]="item.route" class="flex align-items-center cursor-pointer text-color px-3 py-2">
                             <span [class]="item.icon"></span>
                             <span class="ml-2 text-color">{{ item.label }}</span>
                         </a>
                     </ng-container>
-                    <ng-container *ngIf="item.url">
-                        <a [href]="item.url" class="p-menuitem-link">
+                    <ng-template #urlRef>
+                        <a *ngIf="item.url; else noLink" [href]="item.url" class="flex align-items-center cursor-pointer text-color px-3 py-2">
                             <span [class]="item.icon"></span>
                             <span class="ml-2">{{ item.label }}</span>
                         </a>
-                    </ng-container>
-                </ng-template>
-                <ng-template pTemplate="headercontent" let-item>
-                    <div class="flex align-items-center cursor-pointer text-color px-3 py-2">
-                        <span [class]="item.icon"></span>
-                        <span class="ml-2">{{ item.label }}</span>
-                        <i *ngIf="item.items" class="pi pi-angle-down text-primary ml-auto"></i>
-                    </div>
+                        <ng-template #noLink>
+                            <span class="flex align-items-center cursor-pointer text-color px-3 py-2">
+                                <span [class]="item.icon"></span>
+                                <span class="ml-2">{{ item.label }}</span>
+                                <i *ngIf="item.items" class="pi pi-angle-down text-primary ml-auto"></i>
+                            </span>
+                        </ng-template>
+                    </ng-template>
                 </ng-template>
             </p-panelMenu>
         </div>
@@ -90,51 +90,57 @@ export class RouterDoc implements OnInit {
     code: Code = {
         basic: `<p-panelMenu [model]="items" styleClass="w-full md:w-20rem">
     <ng-template pTemplate="item" let-item>
-        <ng-container *ngIf="item.route">
-            <a [routerLink]="item.route" class="flex align-items-center cursor-pointer text-color px-3 py-2">
+        <ng-container *ngIf="item.route; else urlRef">
+            <a [routerLink]="item.route" class="flex align-items-center 
+                cursor-pointer text-color px-3 py-2">
                 <span [class]="item.icon"></span>
                 <span class="ml-2 text-color">{{ item.label }}</span>
             </a>
         </ng-container>
-        <ng-container *ngIf="item.url">
-            <a [href]="item.url" class="p-menuitem-link">
+        <ng-template #urlRef>
+            <a *ngIf="item.url; else noLink" [href]="item.url" class="flex align-items-center 
+                cursor-pointer text-color px-3 py-2">
                 <span [class]="item.icon"></span>
                 <span class="ml-2">{{ item.label }}</span>
             </a>
-        </ng-container>
-    </ng-template>
-    <ng-template pTemplate="headercontent" let-item>
-        <div class="flex align-items-center cursor-pointer text-color px-3 py-2">
-            <span [class]="item.icon"></span>
-            <span class="ml-2">{{ item.label }}</span>
-            <i *ngIf="item.items" class="pi pi-angle-down text-primary ml-auto"></i>
-        </div>
+            <ng-template #noLink>
+                <span class="flex align-items-center cursor-pointer text-color px-3 py-2">
+                    <span [class]="item.icon"></span>
+                    <span class="ml-2">{{ item.label }}</span>
+                    <i *ngIf="item.items" class="pi pi-angle-down text-primary ml-auto"></i>
+                </span>
+            </ng-template>
+        </ng-template>
     </ng-template>
 </p-panelMenu>`,
 
-        html: `<p-panelMenu [model]="items" styleClass="w-full md:w-20rem">
-    <ng-template pTemplate="item" let-item>
-        <ng-container *ngIf="item.route">
-            <a [routerLink]="item.route" class="flex align-items-center cursor-pointer text-color px-3 py-2">
-                <span [class]="item.icon"></span>
-                <span class="ml-2 text-color">{{ item.label }}</span>
-            </a>
-        </ng-container>
-        <ng-container *ngIf="item.url">
-            <a [href]="item.url" class="p-menuitem-link">
-                <span [class]="item.icon"></span>
-                <span class="ml-2">{{ item.label }}</span>
-            </a>
-        </ng-container>
-    </ng-template>
-    <ng-template pTemplate="headercontent" let-item>
-        <div class="flex align-items-center cursor-pointer text-color px-3 py-2">
-            <span [class]="item.icon"></span>
-            <span class="ml-2">{{ item.label }}</span>
-            <i *ngIf="item.items" class="pi pi-angle-down text-primary ml-auto"></i>
-        </div>
-    </ng-template>
-</p-panelMenu>`,
+        html: `<div class="card flex justify-content-center">
+    <p-panelMenu [model]="items" styleClass="w-full md:w-20rem">
+        <ng-template pTemplate="item" let-item>
+            <ng-container *ngIf="item.route; else urlRef">
+                <a [routerLink]="item.route" class="flex align-items-center 
+                    cursor-pointer text-color px-3 py-2">
+                    <span [class]="item.icon"></span>
+                    <span class="ml-2 text-color">{{ item.label }}</span>
+                </a>
+            </ng-container>
+            <ng-template #urlRef>
+                <a *ngIf="item.url; else noLink" [href]="item.url" class="flex align-items-center 
+                    cursor-pointer text-color px-3 py-2">
+                    <span [class]="item.icon"></span>
+                    <span class="ml-2">{{ item.label }}</span>
+                </a>
+                <ng-template #noLink>
+                    <span class="flex align-items-center cursor-pointer text-color px-3 py-2">
+                        <span [class]="item.icon"></span>
+                        <span class="ml-2">{{ item.label }}</span>
+                        <i *ngIf="item.items" class="pi pi-angle-down text-primary ml-auto"></i>
+                    </span>
+                </ng-template>
+            </ng-template>
+        </ng-template>
+    </p-panelMenu>
+</div>`,
 
         typescript: `import { Component, OnInit } from '@angular/core';
 import { MenuItem, MessageService } from 'primeng/api';
diff --git a/src/app/showcase/doc/panelmenu/templatedoc.ts b/src/app/showcase/doc/panelmenu/templatedoc.ts
index 8437d34953b..598229bb5e7 100644
--- a/src/app/showcase/doc/panelmenu/templatedoc.ts
+++ b/src/app/showcase/doc/panelmenu/templatedoc.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { MenuItem } from 'primeng/api';
 import { Code } from '@domain/code';
 
@@ -31,6 +31,7 @@ export class TemplateDoc implements OnInit {
             {
                 label: 'Mail',
                 icon: 'pi pi-envelope',
+                badge: '5',
                 items: [
                     {
                         label: 'Compose',
@@ -119,7 +120,8 @@ export class TemplateDoc implements OnInit {
                 {{ item.label }}
             </span>
             <p-badge *ngIf="item.badge" class="ml-auto" [value]="item.badge" />
-            <span *ngIf="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">
+            <span *ngIf="item.shortcut" class="ml-auto border-1 surface-border 
+            border-round surface-100 text-xs p-1">
                 {{ item.shortcut }}
             </span>
         </a>
@@ -135,7 +137,8 @@ export class TemplateDoc implements OnInit {
                     {{ item.label }}
                 </span>
                 <p-badge *ngIf="item.badge" class="ml-auto" [value]="item.badge" />
-                <span *ngIf="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">
+                <span *ngIf="item.shortcut" class="ml-auto border-1 surface-border 
+                border-round surface-100 text-xs p-1">
                     {{ item.shortcut }}
                 </span>
             </a>
@@ -164,6 +167,7 @@ export class PanelMenuTemplateDemo implements OnInit {
             {
                 label: 'Mail',
                 icon: 'pi pi-envelope',
+                badge: '5',
                 items: [
                     {
                         label: 'Compose',