diff --git a/doc/panelmenu/TemplateDoc.vue b/doc/panelmenu/TemplateDoc.vue
index 9b75c3dc2..03fafa9ff 100644
--- a/doc/panelmenu/TemplateDoc.vue
+++ b/doc/panelmenu/TemplateDoc.vue
@@ -5,8 +5,8 @@
     <div class="card flex justify-center">
         <PanelMenu :model="items" class="w-full md:w-80">
             <template #item="{ item }">
-                <a v-ripple class="flex items-center px-4 py-2 cursor-pointer">
-                    <span :class="[item.icon, 'text-primary']" />
+                <a v-ripple class="flex items-center px-4 py-2 cursor-pointer group">
+                    <span :class="[item.icon, 'text-primary group-hover:text-inherit']" />
                     <span :class="['ml-2', { 'font-semibold': item.items }]">{{ item.label }}</span>
                     <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
                     <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
@@ -88,8 +88,8 @@ export default {
                 basic: `
 <PanelMenu :model="items">
     <template #item="{ item }">
-        <a v-ripple class="flex items-center px-4 py-2 cursor-pointer">
-            <span :class="[item.icon, 'text-primary']" />
+        <a v-ripple class="flex items-center px-4 py-2 cursor-pointer group">
+            <span :class="[item.icon, 'text-primary group-hover:text-inherit']" />
             <span :class="['ml-2', { 'font-semibold': item.items }]">{{ item.label }}</span>
             <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
             <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
@@ -102,8 +102,8 @@ export default {
     <div class="card flex justify-center">
         <PanelMenu :model="items" class="w-full md:w-80">
             <template #item="{ item }">
-                <a v-ripple class="flex items-center px-4 py-2 cursor-pointer">
-                    <span :class="[item.icon, 'text-primary']" />
+                <a v-ripple class="flex items-center px-4 py-2 cursor-pointer group">
+                    <span :class="[item.icon, 'text-primary group-hover:text-inherit']" />
                     <span :class="['ml-2', { 'font-semibold': item.items }]">{{ item.label }}</span>
                     <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
                     <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
@@ -190,8 +190,8 @@ export default {
     <div class="card flex justify-center">
         <PanelMenu :model="items" class="w-full md:w-80">
             <template #item="{ item }">
-                <a v-ripple class="flex items-center px-4 py-2 cursor-pointer">
-                    <span :class="[item.icon, 'text-primary']" />
+                <a v-ripple class="flex items-center px-4 py-2 cursor-pointer group">
+                    <span :class="[item.icon, 'text-primary group-hover:text-inherit']" />
                     <span :class="['ml-2', { 'font-semibold': item.items }]">{{ item.label }}</span>
                     <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
                     <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>