diff --git a/doc/menu/GroupDoc.vue b/doc/menu/GroupDoc.vue
index a654f6e8e..089a4ba4f 100644
--- a/doc/menu/GroupDoc.vue
+++ b/doc/menu/GroupDoc.vue
@@ -31,21 +31,6 @@ export default {
                             }
                         }
                     ]
-                },
-                {
-                    label: 'Navigate',
-                    items: [
-                        {
-                            label: 'Vue Website',
-                            icon: 'pi pi-external-link',
-                            url: 'https://vuejs.org/'
-                        },
-                        {
-                            label: 'Router',
-                            icon: 'pi pi-upload',
-                            to: '/fileupload'
-                        }
-                    ]
                 }
             ],
             code: {
@@ -81,21 +66,6 @@ export default {
                             }
                         }
                     ]
-                },
-                {
-                    label: 'Navigate',
-                    items: [
-                        {
-                            label: 'Vue Website',
-                            icon: 'pi pi-external-link',
-                            url: 'https://vuejs.org/'
-                        },
-                        {
-                            label: 'Router',
-                            icon: 'pi pi-upload',
-                            to: '/fileupload'
-                        }
-                    ]
                 }
             ]
         };
@@ -133,21 +103,6 @@ const items = ref([
                 }
             }
         ]
-    },
-    {
-        label: 'Navigate',
-        items: [
-            {
-                label: 'Vue Website',
-                icon: 'pi pi-external-link',
-                url: 'https://vuejs.org/'
-            },
-            {
-                label: 'Router',
-                icon: 'pi pi-upload',
-                to: '/fileupload'
-            }
-        ]
     }
 ]);
 <\/script>`
diff --git a/doc/menu/PopupDoc.vue b/doc/menu/PopupDoc.vue
index 10d223b27..8329b4df5 100644
--- a/doc/menu/PopupDoc.vue
+++ b/doc/menu/PopupDoc.vue
@@ -32,21 +32,6 @@ export default {
                             }
                         }
                     ]
-                },
-                {
-                    label: 'Navigate',
-                    items: [
-                        {
-                            label: 'Vue Website',
-                            icon: 'pi pi-external-link',
-                            url: 'https://vuejs.org/'
-                        },
-                        {
-                            label: 'Router',
-                            icon: 'pi pi-upload',
-                            to: '/fileupload'
-                        }
-                    ]
                 }
             ],
             code: {
@@ -84,21 +69,6 @@ export default {
                             }
                         }
                     ]
-                },
-                {
-                    label: 'Navigate',
-                    items: [
-                        {
-                            label: 'Vue Website',
-                            icon: 'pi pi-external-link',
-                            url: 'https://vuejs.org/'
-                        },
-                        {
-                            label: 'Router',
-                            icon: 'pi pi-upload',
-                            to: '/fileupload'
-                        }
-                    ]
                 }
             ]
         };
@@ -146,21 +116,6 @@ const items = ref([
                 }
             }
         ]
-    },
-    {
-        label: 'Navigate',
-        items: [
-            {
-                label: 'Vue Website',
-                icon: 'pi pi-external-link',
-                url: 'https://vuejs.org/'
-            },
-            {
-                label: 'Router',
-                icon: 'pi pi-upload',
-                to: '/fileupload'
-            }
-        ]
     }
 ]);
 
diff --git a/doc/menu/RouterDoc.vue b/doc/menu/RouterDoc.vue
new file mode 100644
index 000000000..4b3f7cc9c
--- /dev/null
+++ b/doc/menu/RouterDoc.vue
@@ -0,0 +1,217 @@
+<template>
+    <DocSectionText v-bind="$attrs"> </DocSectionText>
+    <div class="card flex justify-content-center">
+        <Menu :model="items">
+            <template #item="{ label, item, props }">
+                <router-link v-if="item.to" v-slot="routerProps" :to="item.to" custom>
+                    <a :href="routerProps.href" v-bind="props.action">
+                        <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>
+        </Menu>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Options',
+                    items: [
+                        {
+                            label: 'Update',
+                            icon: 'pi pi-refresh',
+
+                            command: () => {
+                                this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+                            }
+                        },
+                        {
+                            label: 'Delete',
+                            icon: 'pi pi-times',
+                            command: () => {
+                                this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+                            }
+                        }
+                    ]
+                },
+                {
+                    label: 'Navigate',
+                    items: [
+                        {
+                            label: 'Vue Website',
+                            icon: 'pi pi-external-link',
+                            url: 'https://vuejs.org/',
+                            target: '_blank'
+                        },
+                        {
+                            label: 'Upload',
+                            icon: 'pi pi-upload',
+                            command: () => {
+                                this.$toast.add({ severity: 'success', summary: 'Upload', detail: 'File Uploaded', life: 3000 });
+                            }
+                        }
+                    ]
+                }
+            ],
+            code: {
+                basic: `<Menu :model="items">
+    <template #item="{ label, item, props }">
+        <router-link v-if="item.to" v-slot="routerProps" :to="item.to" custom>
+            <a :href="routerProps.href" v-bind="props.action">
+                <span v-bind="props.icon" />
+                <span v-bind="props.label">{{ label }}</span>
+            </a>
+        </router-link>
+        <a v-else :href="item.url" v-bind="props.action">
+            <span v-bind="props.icon" />
+            <span v-bind="props.label">{{ label }}</span>
+        </a>
+    </template>
+</Menu>`,
+                options: `<template>
+    <div class="card flex justify-content-center">
+        <Menu :model="items">
+            <template #item="{ label, item, props }">
+                <router-link v-if="item.to" v-slot="routerProps" :to="item.to" custom>
+                    <a :href="routerProps.href" v-bind="props.action">
+                        <span v-bind="props.icon" />
+                        <span v-bind="props.label">{{ label }}</span>
+                    </a>
+                </router-link>
+                <a v-else :href="item.url" v-bind="props.action">
+                    <span v-bind="props.icon" />
+                    <span v-bind="props.label">{{ label }}</span>
+                </a>
+            </template>
+        </Menu>
+        <Toast />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Options',
+                    items: [
+                        {
+                            label: 'Update',
+                            icon: 'pi pi-refresh',
+
+                            command: () => {
+                                this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+                            }
+                        },
+                        {
+                            label: 'Delete',
+                            icon: 'pi pi-times',
+                            command: () => {
+                                this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+                            }
+                        }
+                    ]
+                },
+                {
+                    label: 'Navigate',
+                    items: [
+                        {
+                            label: 'Vue Website',
+                            icon: 'pi pi-external-link',
+                            url: 'https://vuejs.org/',
+                            target: '_blank',
+                        },
+                        {
+                            label: 'Upload',
+                            icon: 'pi pi-upload',
+                            command: () => {
+                                this.$toast.add({ severity: 'success', summary: 'Upload', detail: 'File Uploaded', life: 3000 });
+                            }
+                        }
+                    ]
+                }
+            ]
+        };
+    }
+};
+<\/script>`,
+                composition: `<template>
+    <div class="card flex justify-content-center">
+        <Menu :model="items">
+            <template #item="{ label, item, props }">
+                <router-link v-if="item.to" v-slot="routerProps" :to="item.to" custom>
+                    <a :href="routerProps.href" v-bind="props.action">
+                        <span v-bind="props.icon" />
+                        <span v-bind="props.label">{{ label }}</span>
+                    </a>
+                </router-link>
+                <a v-else :href="item.url" v-bind="props.action">
+                    <span v-bind="props.icon" />
+                    <span v-bind="props.label">{{ label }}</span>
+                </a>
+            </template>
+        </Menu>
+        <Toast />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const items = ref(items: [
+    {
+        label: 'Options',
+        items: [
+            {
+                label: 'Update',
+                icon: 'pi pi-refresh',
+
+                command: () => {
+                    this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+                }
+            },
+            {
+                label: 'Delete',
+                icon: 'pi pi-times',
+                command: () => {
+                    this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+                }
+            }
+        ]
+    },
+    {
+        label: 'Navigate',
+        items: [
+            {
+                label: 'Vue Website',
+                icon: 'pi pi-external-link',
+                url: 'https://vuejs.org/',
+                target: '_blank',
+            },
+            {
+                label: 'Upload',
+                icon: 'pi pi-upload',
+                command: () => {
+                    this.$toast.add({ severity: 'success', summary: 'Upload', detail: 'File Uploaded', life: 3000 });
+                }
+            }
+        ]
+    }
+]);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/menu/TemplateDoc.vue b/doc/menu/TemplateDoc.vue
index 32d69cf26..977fd2cb6 100644
--- a/doc/menu/TemplateDoc.vue
+++ b/doc/menu/TemplateDoc.vue
@@ -13,6 +13,13 @@
                     </div>
                 </button>
             </template>
+            <template #item="{ item, label, props }">
+                <a class="flex" v-bind="props.action">
+                    <span v-bind="props.icon" />
+                    <span v-bind="props.label">{{ label }}</span>
+                    <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
+                </a>
+            </template>
             <template #end>
                 <button class="w-full p-link flex align-items-center p-2 pl-4 text-color hover:surface-200 border-noround">
                     <i class="pi pi-sign-out" />
@@ -28,7 +35,19 @@
 export default {
     data() {
         return {
-            items: [{ separator: true }, { label: 'Profile', icon: 'pi pi-fw pi-user' }, { label: 'Settings', icon: 'pi pi-fw pi-cog' }, { separator: true }],
+            items: [
+                { separator: true },
+                {
+                    label: 'Profile',
+                    icon: 'pi pi-fw pi-user'
+                },
+                {
+                    label: 'Settings',
+                    icon: 'pi pi-fw pi-cog',
+                    badge: 2
+                },
+                { separator: true }
+            ],
             code: {
                 basic: `<Menu :model="items">
     <template #start>
@@ -40,6 +59,13 @@ export default {
             </div>
         </button>
     </template>
+    <template #item="{ item, label, props }">
+        <a class="flex" v-bind="props.action">
+            <span v-bind="props.icon" />
+            <span v-bind="props.label">{{ label }}</span>
+            <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
+        </a>
+    </template>
     <template #end>
         <button class="w-full p-link flex align-items-center p-2 pl-4 text-color hover:surface-200 border-noround">
             <i class="pi pi-sign-out" />
@@ -59,6 +85,13 @@ export default {
                     </div>
                 </button>
             </template>
+            <template #item="{ item, label, props }">
+                <a class="flex" v-bind="props.action">
+                    <span v-bind="props.icon" />
+                    <span v-bind="props.label">{{ label }}</span>
+                    <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
+                </a>
+            </template>
             <template #end>
                 <button class="w-full p-link flex align-items-center p-2 pl-4 text-color hover:surface-200 border-noround">
                     <i class="pi pi-sign-out" />
@@ -76,8 +109,15 @@ export default {
         return {
             items: [
                 { separator: true },
-                { label: 'Profile', icon: 'pi pi-fw pi-user' },
-                { label: 'Settings', icon: 'pi pi-fw pi-cog' },
+                {
+                    label: 'Profile',
+                    icon: 'pi pi-fw pi-user'
+                },
+                {
+                    label: 'Settings',
+                    icon: 'pi pi-fw pi-cog',
+                    badge: 2
+                },
                 { separator: true }
             ]
         };
@@ -101,6 +141,13 @@ export default {
                     </div>
                 </button>
             </template>
+            <template #item="{ item, label, props }">
+                <a class="flex" v-bind="props.action">
+                    <span v-bind="props.icon" />
+                    <span v-bind="props.label">{{ label }}</span>
+                    <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
+                </a>
+            </template>
             <template #end>
                 <button class="w-full p-link flex align-items-center p-2 pl-4 text-color hover:surface-200 border-noround">
                     <i class="pi pi-sign-out" />
@@ -118,8 +165,15 @@ import { useToast } from "primevue/usetoast";
 
 const items = ref([
     { separator: true },
-    { label: 'Profile', icon: 'pi pi-fw pi-user' },
-    { label: 'Settings', icon: 'pi pi-fw pi-cog' },
+    {
+        label: 'Profile',
+        icon: 'pi pi-fw pi-user'
+    },
+    {
+        label: 'Settings',
+        icon: 'pi pi-fw pi-cog',
+        badge: 2
+    },
     { separator: true }
 ]);