From b5e0455c2e7e650f478fa3cb6224cfe1f7d3cffc Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 30 Aug 2023 10:26:11 +0300
Subject: [PATCH] Update menu docs for router

---
 doc/menu/RouterDoc.vue   | 11 +++++++----
 doc/menu/TemplateDoc.vue |  5 ++++-
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/doc/menu/RouterDoc.vue b/doc/menu/RouterDoc.vue
index db6a4d735..43c429f96 100644
--- a/doc/menu/RouterDoc.vue
+++ b/doc/menu/RouterDoc.vue
@@ -1,5 +1,10 @@
 <template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Since v3.23.0 the vue-router dependency of menu components is deprecated and templating should be used to define router links instead. This approach provides flexibility to be able to use any kind of router link component such as
+            <i>NuxtLink</i> or <i>router-link</i>. Here is an example with vue-router.
+        </p>
+    </DocSectionText>
     <div class="card flex justify-content-center">
         <Menu :model="items">
             <template #item="{ label, item, props }">
@@ -55,9 +60,7 @@ export default {
                         {
                             label: 'Upload',
                             icon: 'pi pi-upload',
-                            command: () => {
-                                this.$toast.add({ severity: 'success', summary: 'Upload', detail: 'File Uploaded', life: 3000 });
-                            }
+                            to: '/fileupload'
                         }
                     ]
                 }
diff --git a/doc/menu/TemplateDoc.vue b/doc/menu/TemplateDoc.vue
index 977fd2cb6..bcee59651 100644
--- a/doc/menu/TemplateDoc.vue
+++ b/doc/menu/TemplateDoc.vue
@@ -1,6 +1,9 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Two slots named "start" and "end" are provided to embed content before or after the menu. In additon Menu, offers item customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
+        <p>
+            Menu offers item customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter. When item templating is used, it is suggested to bind the <i>action</i> prop from the slot props to handle
+            accessibility and pass through attributes. Additionally, two slots named <i>start</i> and <i>end</i> are provided to embed content before or after the menu.
+        </p>
     </DocSectionText>
     <div class="card flex justify-content-center">
         <Menu :model="items">