diff --git a/doc/contextmenu/RouterDoc.vue b/doc/contextmenu/RouterDoc.vue
index dfdb077ab..7d07d7bca 100644
--- a/doc/contextmenu/RouterDoc.vue
+++ b/doc/contextmenu/RouterDoc.vue
@@ -10,7 +10,7 @@
         <ContextMenu ref="routemenu" :model="items">
             <template #item="{ label, item, props }">
                 <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
-                    <a :href="routerProps.href" v-bind="props.action">
+                    <a :href="routerProps.href" v-bind="props.action" @click="routerProps.navigate">
                         <span v-bind="props.icon" />
                         <span v-bind="props.label">{{ label }}</span>
                     </a>
@@ -42,13 +42,39 @@ export default {
             code: {
                 basic: `
 <img alt="Logo" src="/images/nature/nature3.jpg" class="w-full md:w-auto" @contextmenu="onImageRightClick" aria-haspopup="true" />
-<ContextMenu ref="routemenu" :model="items" />
+<ContextMenu ref="routemenu" :model="items">
+    <template #item="{ label, item, props }">
+        <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
+            <a :href="routerProps.href" v-bind="props.action" @click="routerProps.navigate">
+                <span v-bind="props.icon" />
+                <span v-bind="props.label">{{ label }}</span>
+            </a>
+        </router-link>
+        <a v-else :href="item.url" :target="item.target" v-bind="props.action">
+            <span v-bind="props.icon" />
+            <span v-bind="props.label">{{ label }}</span>
+        </a>
+    </template>
+</ContextMenu>
 `,
                 options: `
 <template>
     <div class="card flex md:justify-content-center">
         <img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature3.jpg" @contextmenu="onImageRightClick" class="w-full md:w-auto" aria-haspopup="true" />
-        <ContextMenu ref="routemenu" :model="items" />
+        <ContextMenu ref="routemenu" :model="items">
+            <template #item="{ label, item, props }">
+                <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
+                    <a :href="routerProps.href" v-bind="props.action" @click="routerProps.navigate">
+                        <span v-bind="props.icon" />
+                        <span v-bind="props.label">{{ label }}</span>
+                    </a>
+                </router-link>
+                <a v-else :href="item.url" :target="item.target" v-bind="props.action">
+                    <span v-bind="props.icon" />
+                    <span v-bind="props.label">{{ label }}</span>
+                </a>
+            </template>
+        </ContextMenu>
     </div>
 </template>
 
@@ -79,7 +105,20 @@ export default {
 <template>
     <div class="card">
         <img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature3.jpg" @contextmenu="onImageRightClick" class="w-full md:w-auto" aria-haspopup="true" />
-        <ContextMenu ref="routemenu" :model="items" />
+        <ContextMenu ref="routemenu" :model="items">
+            <template #item="{ label, item, props }">
+                <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
+                    <a :href="routerProps.href" v-bind="props.action" @click="routerProps.navigate">
+                        <span v-bind="props.icon" />
+                        <span v-bind="props.label">{{ label }}</span>
+                    </a>
+                </router-link>
+                <a v-else :href="item.url" :target="item.target" v-bind="props.action">
+                    <span v-bind="props.icon" />
+                    <span v-bind="props.label">{{ label }}</span>
+                </a>
+            </template>
+        </ContextMenu>
     </div>
 </template>
 
diff --git a/doc/megamenu/RouterDoc.vue b/doc/megamenu/RouterDoc.vue
index 7bb9597e8..204843ce6 100644
--- a/doc/megamenu/RouterDoc.vue
+++ b/doc/megamenu/RouterDoc.vue
@@ -9,7 +9,7 @@
         <MegaMenu :model="items">
             <template #item="{ label, item, props, hasSubmenu }">
                 <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
-                    <a :href="routerProps.href" v-bind="props.action">
+                    <a :href="routerProps.href" v-bind="props.action" @click="routerProps.navigate">
                         <span v-bind="props.icon" />
                         <span v-bind="props.label">{{ label }}</span>
                     </a>
@@ -155,7 +155,7 @@ export default {
 <MegaMenu :model="items">
     <template #item="{ label, item, props, hasSubmenu }">
         <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
-            <a :href="routerProps.href" v-bind="props.action">
+            <a :href="routerProps.href" v-bind="props.action" @click="routerProps.navigate">
                 <span v-bind="props.icon" />
                 <span v-bind="props.label">{{ label }}</span>
             </a>
@@ -174,7 +174,7 @@ export default {
         <MegaMenu :model="items">
             <template #item="{ label, item, props, hasSubmenu }">
                 <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
-                    <a :href="routerProps.href" v-bind="props.action">
+                    <a :href="routerProps.href" v-bind="props.action" @click="routerProps.navigate">
                         <span v-bind="props.icon" />
                         <span v-bind="props.label">{{ label }}</span>
                     </a>
@@ -325,7 +325,7 @@ export default {
         <MegaMenu :model="items">
             <template #item="{ label, item, props, hasSubmenu }">
                 <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
-                    <a :href="routerProps.href" v-bind="props.action">
+                    <a :href="routerProps.href" v-bind="props.action" @click="routerProps.navigate">
                         <span v-bind="props.icon" />
                         <span v-bind="props.label">{{ label }}</span>
                     </a>
diff --git a/doc/menu/RouterDoc.vue b/doc/menu/RouterDoc.vue
index 60a9dbba5..7754a7cb2 100644
--- a/doc/menu/RouterDoc.vue
+++ b/doc/menu/RouterDoc.vue
@@ -70,7 +70,7 @@ export default {
 <Menu :model="items">
     <template #item="{ label, item, props }">
         <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
-            <a :href="routerProps.href" v-bind="props.action">
+            <a :href="routerProps.href" v-bind="props.action" @click="routerProps.navigate">
                 <span v-bind="props.icon" />
                 <span v-bind="props.label">{{ label }}</span>
             </a>
@@ -88,7 +88,7 @@ export default {
         <Menu :model="items">
             <template #item="{ label, item, props }">
                 <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
-                    <a :href="routerProps.href" v-bind="props.action">
+                    <a :href="routerProps.href" v-bind="props.action" @click="routerProps.navigate">
                         <span v-bind="props.icon" />
                         <span v-bind="props.label">{{ label }}</span>
                     </a>
diff --git a/doc/menubar/RouterDoc.vue b/doc/menubar/RouterDoc.vue
index 66485943a..919bca996 100644
--- a/doc/menubar/RouterDoc.vue
+++ b/doc/menubar/RouterDoc.vue
@@ -9,7 +9,7 @@
         <Menubar :model="items">
             <template #item="{ label, item, props, root, hasSubmenu }">
                 <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
-                    <a :href="routerProps.href" v-bind="props.action">
+                    <a :href="routerProps.href" v-bind="props.action" @click="routerProps.navigate">
                         <span v-bind="props.icon" />
                         <span v-bind="props.label">{{ label }}</span>
                     </a>
@@ -162,7 +162,7 @@ export default {
 <Menubar :model="items">
     <template #item="{ label, item, props, root, hasSubmenu }">
         <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
-            <a :href="routerProps.href" v-bind="props.action">
+            <a :href="routerProps.href" v-bind="props.action" @click="routerProps.navigate">
                 <span v-bind="props.icon" />
                 <span v-bind="props.label">{{ label }}</span>
             </a>
@@ -181,7 +181,7 @@ export default {
         <Menubar :model="items">
             <template #item="{ label, item, props, root, hasSubmenu }">
                 <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
-                    <a :href="routerProps.href" v-bind="props.action">
+                    <a :href="routerProps.href" v-bind="props.action" @click="routerProps.navigate">
                         <span v-bind="props.icon" />
                         <span v-bind="props.label">{{ label }}</span>
                     </a>
@@ -339,7 +339,7 @@ export default {
         <Menubar :model="items">
             <template #item="{ label, item, props, root, hasSubmenu }">
                 <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
-                    <a :href="routerProps.href" v-bind="props.action">
+                    <a :href="routerProps.href" v-bind="props.action" @click="routerProps.navigate">
                         <span v-bind="props.icon" />
                         <span v-bind="props.label">{{ label }}</span>
                     </a>
diff --git a/doc/tieredmenu/RouterDoc.vue b/doc/tieredmenu/RouterDoc.vue
index f2f1c7bbd..ba2ef0cf7 100644
--- a/doc/tieredmenu/RouterDoc.vue
+++ b/doc/tieredmenu/RouterDoc.vue
@@ -9,7 +9,7 @@
         <TieredMenu :model="items">
             <template #item="{ label, item, props, hasSubmenu }">
                 <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
-                    <a :href="routerProps.href" v-bind="props.action">
+                    <a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)">
                         <span v-bind="props.icon" />
                         <span v-bind="props.label">{{ label }}</span>
                     </a>
@@ -162,12 +162,40 @@ export default {
             ],
             code: {
                 basic: `
-<TieredMenu :model="items" />
+<TieredMenu :model="items">
+    <template #item="{ label, item, props, hasSubmenu }">
+        <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
+            <a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)">
+                <span v-bind="props.icon" />
+                <span v-bind="props.label">{{ label }}</span>
+            </a>
+        </router-link>
+        <a v-else :href="item.url" :target="item.target" v-bind="props.action">
+            <span v-bind="props.icon" />
+            <span v-bind="props.label">{{ label }}</span>
+            <span v-if="hasSubmenu" class="pi pi-fw pi-angle-right" v-bind="props.submenuicon" />
+        </a>
+    </template>
+</TieredMenu>
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <TieredMenu :model="items" />
+        <TieredMenu :model="items">
+            <template #item="{ label, item, props, hasSubmenu }">
+                <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
+                    <a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)">
+                        <span v-bind="props.icon" />
+                        <span v-bind="props.label">{{ label }}</span>
+                    </a>
+                </router-link>
+                <a v-else :href="item.url" :target="item.target" v-bind="props.action">
+                    <span v-bind="props.icon" />
+                    <span v-bind="props.label">{{ label }}</span>
+                    <span v-if="hasSubmenu" class="pi pi-fw pi-angle-right" v-bind="props.submenuicon" />
+                </a>
+            </template>
+        </TieredMenu>
     </div>
 </template>
 
@@ -314,7 +342,21 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <TieredMenu :model="items" />
+        <TieredMenu :model="items">
+            <template #item="{ label, item, props, hasSubmenu }">
+                <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
+                    <a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)">
+                        <span v-bind="props.icon" />
+                        <span v-bind="props.label">{{ label }}</span>
+                    </a>
+                </router-link>
+                <a v-else :href="item.url" :target="item.target" v-bind="props.action">
+                    <span v-bind="props.icon" />
+                    <span v-bind="props.label">{{ label }}</span>
+                    <span v-if="hasSubmenu" class="pi pi-fw pi-angle-right" v-bind="props.submenuicon" />
+                </a>
+            </template>
+        </TieredMenu>
     </div>
 </template>