diff --git a/doc/menubar/RouterDoc.vue b/doc/menubar/RouterDoc.vue
index cbe07429c..28caffaf7 100644
--- a/doc/menubar/RouterDoc.vue
+++ b/doc/menubar/RouterDoc.vue
@@ -159,7 +159,7 @@ export default {
             ],
             code: {
                 basic: `<Menubar :model="items">
-    <template #item="{ label, item, props, root }">
+    <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">
                 <span v-bind="props.icon" />
@@ -169,14 +169,14 @@ export default {
         <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 :class="[root ? 'pi pi-fw pi-angle-down' : 'pi pi-fw pi-angle-right']" v-bind="props.submenuicon" />
+            <span :class="[hasSubmenu && (root ? 'pi pi-fw pi-angle-down' : 'pi pi-fw pi-angle-right')]" v-bind="props.submenuicon" />
         </a>
     </template>
 </Menubar>`,
                 options: `<template>
     <div class="card relative z-2">
         <Menubar :model="items">
-            <template #item="{ label, item, props, root }">
+            <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">
                         <span v-bind="props.icon" />
@@ -186,7 +186,7 @@ export default {
                 <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 :class="[root ? 'pi pi-fw pi-angle-down' : 'pi pi-fw pi-angle-right']" v-bind="props.submenuicon" />
+                    <span :class="[hasSubmenu && (root ? 'pi pi-fw pi-angle-down' : 'pi pi-fw pi-angle-right')]" v-bind="props.submenuicon" />
                 </a>
             </template>
         </Menubar>
@@ -332,7 +332,7 @@ export default {
                 composition: `<template>
     <div class="card relative z-2">
         <Menubar :model="items">
-            <template #item="{ label, item, props, root }">
+            <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">
                         <span v-bind="props.icon" />
@@ -342,7 +342,7 @@ export default {
                 <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 :class="[root ? 'pi pi-fw pi-angle-down' : 'pi pi-fw pi-angle-right']" v-bind="props.submenuicon" />
+                    <span :class="[hasSubmenu && (root ? 'pi pi-fw pi-angle-down' : 'pi pi-fw pi-angle-right')]" v-bind="props.submenuicon" />
                 </a>
             </template>
         </Menubar>
diff --git a/doc/menubar/TemplateDoc.vue b/doc/menubar/TemplateDoc.vue
index 5fa837ccc..e0d484df1 100644
--- a/doc/menubar/TemplateDoc.vue
+++ b/doc/menubar/TemplateDoc.vue
@@ -7,7 +7,7 @@
             <template #start>
                 <img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" height="40" class="mr-2" />
             </template>
-            <template #item="{ label, item, props, root }">
+            <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">
                         <span v-bind="props.icon" />
@@ -17,7 +17,7 @@
                 <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 :class="[root ? 'pi pi-fw pi-angle-down' : 'pi pi-fw pi-angle-right']" v-bind="props.submenuicon" />
+                    <span :class="[hasSubmenu && (root ? 'pi pi-fw pi-angle-down' : 'pi pi-fw pi-angle-right')]" v-bind="props.submenuicon" />
                 </a>
             </template>
             <template #end>
@@ -165,7 +165,7 @@ export default {
     <template #start>
         <img alt="logo" src="/images/logo.svg" height="40" class="mr-2" />
     </template>
-    <template #item="{ label, item, props, root }">
+    <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">
                 <span v-bind="props.icon" />
@@ -175,7 +175,7 @@ export default {
         <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 :class="[root ? 'pi pi-fw pi-angle-down' : 'pi pi-fw pi-angle-right']" v-bind="props.submenuicon" />
+            <span :class="[hasSubmenu && (root ? 'pi pi-fw pi-angle-down' : 'pi pi-fw pi-angle-right')]" v-bind="props.submenuicon" />
         </a>
     </template>
     <template #end>
@@ -188,7 +188,7 @@ export default {
             <template #start>
                 <img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" height="40" class="mr-2" />
             </template>
-            <template #item="{ label, item, props, root }">
+            <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">
                         <span v-bind="props.icon" />
@@ -198,7 +198,7 @@ export default {
                 <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 :class="[root ? 'pi pi-fw pi-angle-down' : 'pi pi-fw pi-angle-right']" v-bind="props.submenuicon" />
+                    <span :class="[hasSubmenu && (root ? 'pi pi-fw pi-angle-down' : 'pi pi-fw pi-angle-right')]" v-bind="props.submenuicon" />
                 </a>
             </template>
             <template #end>
@@ -350,7 +350,7 @@ export default {
             <template #start>
                 <img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" height="40" class="mr-2" />
             </template>
-            <template #item="{ label, item, props, root }">
+            <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">
                         <span v-bind="props.icon" />
@@ -360,7 +360,7 @@ export default {
                 <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 :class="[root ? 'pi pi-fw pi-angle-down' : 'pi pi-fw pi-angle-right']" v-bind="props.submenuicon" />
+                    <span :class="[hasSubmenu && (root ? 'pi pi-fw pi-angle-down' : 'pi pi-fw pi-angle-right')]" v-bind="props.submenuicon" />
                 </a>
             </template>
             <template #end>