From c7975c24aca0d65e7b6ce82c4d1ddafffc94fb4c Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 8 Nov 2023 11:33:18 +0300
Subject: [PATCH] Updated PanelMenu docs

---
 doc/panelmenu/BasicDoc.vue        | 432 +++++++++--------------
 doc/panelmenu/CommandDoc.vue      | 225 ++++++++++++
 doc/panelmenu/ControlledDoc.vue   | 337 ++++++++++++++++++
 doc/panelmenu/MultipleDoc.vue     | 497 --------------------------
 doc/panelmenu/ProgrammaticDoc.vue | 558 ------------------------------
 doc/panelmenu/RouterDoc.vue       | 233 ++++++++++++-
 doc/panelmenu/TemplateDoc.vue     | 276 +++++++++++++++
 pages/panelmenu/index.vue         |  22 +-
 8 files changed, 1240 insertions(+), 1340 deletions(-)
 create mode 100644 doc/panelmenu/CommandDoc.vue
 create mode 100644 doc/panelmenu/ControlledDoc.vue
 delete mode 100644 doc/panelmenu/MultipleDoc.vue
 delete mode 100644 doc/panelmenu/ProgrammaticDoc.vue
 create mode 100644 doc/panelmenu/TemplateDoc.vue

diff --git a/doc/panelmenu/BasicDoc.vue b/doc/panelmenu/BasicDoc.vue
index e8955c7df..19d1b86ed 100644
--- a/doc/panelmenu/BasicDoc.vue
+++ b/doc/panelmenu/BasicDoc.vue
@@ -3,7 +3,7 @@
         <p>PanelMenu requires a collection of menuitems as its <i>model</i>.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <PanelMenu :model="items" class="w-full md:w-25rem" />
+        <PanelMenu :model="items" class="w-full md:w-20rem" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -14,116 +14,78 @@ export default {
         return {
             items: [
                 {
-                    label: 'File',
-                    icon: 'pi pi-fw pi-file',
+                    label: 'Files',
+                    icon: 'pi pi-file',
                     items: [
                         {
-                            label: 'New',
-                            icon: 'pi pi-fw pi-plus',
+                            label: 'Documents',
+                            icon: 'pi pi-file',
                             items: [
                                 {
-                                    label: 'Bookmark',
-                                    icon: 'pi pi-fw pi-bookmark'
-                                },
-                                {
-                                    label: 'Video',
-                                    icon: 'pi pi-fw pi-video'
-                                }
-                            ]
-                        },
-                        {
-                            label: 'Delete',
-                            icon: 'pi pi-fw pi-trash'
-                        },
-                        {
-                            label: 'Export',
-                            icon: 'pi pi-fw pi-external-link'
-                        }
-                    ]
-                },
-                {
-                    label: 'Edit',
-                    icon: 'pi pi-fw pi-pencil',
-                    items: [
-                        {
-                            label: 'Left',
-                            icon: 'pi pi-fw pi-align-left'
-                        },
-                        {
-                            label: 'Right',
-                            icon: 'pi pi-fw pi-align-right'
-                        },
-                        {
-                            label: 'Center',
-                            icon: 'pi pi-fw pi-align-center'
-                        },
-                        {
-                            label: 'Justify',
-                            icon: 'pi pi-fw pi-align-justify'
-                        }
-                    ]
-                },
-                {
-                    label: 'Users',
-                    icon: 'pi pi-fw pi-user',
-                    items: [
-                        {
-                            label: 'New',
-                            icon: 'pi pi-fw pi-user-plus'
-                        },
-                        {
-                            label: 'Delete',
-                            icon: 'pi pi-fw pi-user-minus'
-                        },
-                        {
-                            label: 'Search',
-                            icon: 'pi pi-fw pi-users',
-                            items: [
-                                {
-                                    label: 'Filter',
-                                    icon: 'pi pi-fw pi-filter',
+                                    label: 'Invoices',
+                                    icon: 'pi pi-file-pdf',
                                     items: [
                                         {
-                                            label: 'Print',
-                                            icon: 'pi pi-fw pi-print'
+                                            label: 'Pending',
+                                            icon: 'pi pi-stop'
+                                        },
+                                        {
+                                            label: 'Paid',
+                                            icon: 'pi pi-check-circle'
                                         }
                                     ]
                                 },
                                 {
-                                    icon: 'pi pi-fw pi-bars',
-                                    label: 'List'
+                                    label: 'Clients',
+                                    icon: 'pi pi-users'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Images',
+                            icon: 'pi pi-image',
+                            items: [
+                                {
+                                    label: 'Logos',
+                                    icon: 'pi pi-image'
                                 }
                             ]
                         }
                     ]
                 },
                 {
-                    label: 'Events',
-                    icon: 'pi pi-fw pi-calendar',
+                    label: 'Cloud',
+                    icon: 'pi pi-cloud',
                     items: [
                         {
-                            label: 'Edit',
-                            icon: 'pi pi-fw pi-pencil',
-                            items: [
-                                {
-                                    label: 'Save',
-                                    icon: 'pi pi-fw pi-calendar-plus'
-                                },
-                                {
-                                    label: 'Delete',
-                                    icon: 'pi pi-fw pi-calendar-minus'
-                                }
-                            ]
+                            label: 'Upload',
+                            icon: 'pi pi-cloud-upload'
                         },
                         {
-                            label: 'Archive',
-                            icon: 'pi pi-fw pi-calendar-times',
-                            items: [
-                                {
-                                    label: 'Remove',
-                                    icon: 'pi pi-fw pi-calendar-minus'
-                                }
-                            ]
+                            label: 'Download',
+                            icon: 'pi pi-cloud-download'
+                        },
+                        {
+                            label: 'Sync',
+                            icon: 'pi pi-refresh'
+                        }
+                    ]
+                },
+                {
+                    label: 'Devices',
+                    icon: 'pi pi-desktop',
+                    items: [
+                        {
+                            label: 'Phone',
+                            icon: 'pi pi-mobile'
+                        },
+                        {
+                            label: 'Desktop',
+                            icon: 'pi pi-desktop'
+                        },
+                        {
+                            label: 'Tablet',
+                            icon: 'pi pi-tablet'
                         }
                     ]
                 }
@@ -135,7 +97,7 @@ export default {
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <PanelMenu :model="items" class="w-full md:w-25rem" />
+        <PanelMenu :model="items" class="w-full md:w-20rem" />
     </div>
 </template>
 
@@ -145,116 +107,78 @@ export default {
         return {
             items: [
                 {
-                    label: 'File',
-                    icon: 'pi pi-fw pi-file',
+                    label: 'Files',
+                    icon: 'pi pi-file',
                     items: [
                         {
-                            label: 'New',
-                            icon: 'pi pi-fw pi-plus',
+                            label: 'Documents',
+                            icon: 'pi pi-file',
                             items: [
                                 {
-                                    label: 'Bookmark',
-                                    icon: 'pi pi-fw pi-bookmark'
-                                },
-                                {
-                                    label: 'Video',
-                                    icon: 'pi pi-fw pi-video'
-                                }
-                            ]
-                        },
-                        {
-                            label: 'Delete',
-                            icon: 'pi pi-fw pi-trash'
-                        },
-                        {
-                            label: 'Export',
-                            icon: 'pi pi-fw pi-external-link'
-                        }
-                    ]
-                },
-                {
-                    label: 'Edit',
-                    icon: 'pi pi-fw pi-pencil',
-                    items: [
-                        {
-                            label: 'Left',
-                            icon: 'pi pi-fw pi-align-left'
-                        },
-                        {
-                            label: 'Right',
-                            icon: 'pi pi-fw pi-align-right'
-                        },
-                        {
-                            label: 'Center',
-                            icon: 'pi pi-fw pi-align-center'
-                        },
-                        {
-                            label: 'Justify',
-                            icon: 'pi pi-fw pi-align-justify'
-                        }
-                    ]
-                },
-                {
-                    label: 'Users',
-                    icon: 'pi pi-fw pi-user',
-                    items: [
-                        {
-                            label: 'New',
-                            icon: 'pi pi-fw pi-user-plus'
-                        },
-                        {
-                            label: 'Delete',
-                            icon: 'pi pi-fw pi-user-minus'
-                        },
-                        {
-                            label: 'Search',
-                            icon: 'pi pi-fw pi-users',
-                            items: [
-                                {
-                                    label: 'Filter',
-                                    icon: 'pi pi-fw pi-filter',
+                                    label: 'Invoices',
+                                    icon: 'pi pi-file-pdf',
                                     items: [
                                         {
-                                            label: 'Print',
-                                            icon: 'pi pi-fw pi-print'
+                                            label: 'Pending',
+                                            icon: 'pi pi-stop'
+                                        },
+                                        {
+                                            label: 'Paid',
+                                            icon: 'pi pi-check-circle'
                                         }
                                     ]
                                 },
                                 {
-                                    icon: 'pi pi-fw pi-bars',
-                                    label: 'List'
+                                    label: 'Clients',
+                                    icon: 'pi pi-users'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Images',
+                            icon: 'pi pi-image',
+                            items: [
+                                {
+                                    label: 'Logos',
+                                    icon: 'pi pi-image'
                                 }
                             ]
                         }
                     ]
                 },
                 {
-                    label: 'Events',
-                    icon: 'pi pi-fw pi-calendar',
+                    label: 'Cloud',
+                    icon: 'pi pi-cloud',
                     items: [
                         {
-                            label: 'Edit',
-                            icon: 'pi pi-fw pi-pencil',
-                            items: [
-                                {
-                                    label: 'Save',
-                                    icon: 'pi pi-fw pi-calendar-plus'
-                                },
-                                {
-                                    label: 'Delete',
-                                    icon: 'pi pi-fw pi-calendar-minus'
-                                }
-                            ]
+                            label: 'Upload',
+                            icon: 'pi pi-cloud-upload'
                         },
                         {
-                            label: 'Archive',
-                            icon: 'pi pi-fw pi-calendar-times',
-                            items: [
-                                {
-                                    label: 'Remove',
-                                    icon: 'pi pi-fw pi-calendar-minus'
-                                }
-                            ]
+                            label: 'Download',
+                            icon: 'pi pi-cloud-download'
+                        },
+                        {
+                            label: 'Sync',
+                            icon: 'pi pi-refresh'
+                        }
+                    ]
+                },
+                {
+                    label: 'Devices',
+                    icon: 'pi pi-desktop',
+                    items: [
+                        {
+                            label: 'Phone',
+                            icon: 'pi pi-mobile'
+                        },
+                        {
+                            label: 'Desktop',
+                            icon: 'pi pi-desktop'
+                        },
+                        {
+                            label: 'Tablet',
+                            icon: 'pi pi-tablet'
                         }
                     ]
                 }
@@ -267,7 +191,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <PanelMenu :model="items" class="w-full md:w-25rem" />
+        <PanelMenu :model="items" class="w-full md:w-20rem" />
     </div>
 </template>
 
@@ -276,116 +200,78 @@ import { ref } from "vue";
 
 const items = ref([
     {
-        label: 'File',
-        icon: 'pi pi-fw pi-file',
+        label: 'Files',
+        icon: 'pi pi-file',
         items: [
             {
-                label: 'New',
-                icon: 'pi pi-fw pi-plus',
+                label: 'Documents',
+                icon: 'pi pi-file',
                 items: [
                     {
-                        label: 'Bookmark',
-                        icon: 'pi pi-fw pi-bookmark'
-                    },
-                    {
-                        label: 'Video',
-                        icon: 'pi pi-fw pi-video'
-                    }
-                ]
-            },
-            {
-                label: 'Delete',
-                icon: 'pi pi-fw pi-trash'
-            },
-            {
-                label: 'Export',
-                icon: 'pi pi-fw pi-external-link'
-            }
-        ]
-    },
-    {
-        label: 'Edit',
-        icon: 'pi pi-fw pi-pencil',
-        items: [
-            {
-                label: 'Left',
-                icon: 'pi pi-fw pi-align-left'
-            },
-            {
-                label: 'Right',
-                icon: 'pi pi-fw pi-align-right'
-            },
-            {
-                label: 'Center',
-                icon: 'pi pi-fw pi-align-center'
-            },
-            {
-                label: 'Justify',
-                icon: 'pi pi-fw pi-align-justify'
-            }
-        ]
-    },
-    {
-        label: 'Users',
-        icon: 'pi pi-fw pi-user',
-        items: [
-            {
-                label: 'New',
-                icon: 'pi pi-fw pi-user-plus'
-            },
-            {
-                label: 'Delete',
-                icon: 'pi pi-fw pi-user-minus'
-            },
-            {
-                label: 'Search',
-                icon: 'pi pi-fw pi-users',
-                items: [
-                    {
-                        label: 'Filter',
-                        icon: 'pi pi-fw pi-filter',
+                        label: 'Invoices',
+                        icon: 'pi pi-file-pdf',
                         items: [
                             {
-                                label: 'Print',
-                                icon: 'pi pi-fw pi-print'
+                                label: 'Pending',
+                                icon: 'pi pi-stop'
+                            },
+                            {
+                                label: 'Paid',
+                                icon: 'pi pi-check-circle'
                             }
                         ]
                     },
                     {
-                        icon: 'pi pi-fw pi-bars',
-                        label: 'List'
+                        label: 'Clients',
+                        icon: 'pi pi-users'
+                    }
+                ]
+            },
+            {
+                label: 'Images',
+                icon: 'pi pi-image',
+                items: [
+                    {
+                        label: 'Logos',
+                        icon: 'pi pi-image'
                     }
                 ]
             }
         ]
     },
     {
-        label: 'Events',
-        icon: 'pi pi-fw pi-calendar',
+        label: 'Cloud',
+        icon: 'pi pi-cloud',
         items: [
             {
-                label: 'Edit',
-                icon: 'pi pi-fw pi-pencil',
-                items: [
-                    {
-                        label: 'Save',
-                        icon: 'pi pi-fw pi-calendar-plus'
-                    },
-                    {
-                        label: 'Delete',
-                        icon: 'pi pi-fw pi-calendar-minus'
-                    }
-                ]
+                label: 'Upload',
+                icon: 'pi pi-cloud-upload'
             },
             {
-                label: 'Archive',
-                icon: 'pi pi-fw pi-calendar-times',
-                items: [
-                    {
-                        label: 'Remove',
-                        icon: 'pi pi-fw pi-calendar-minus'
-                    }
-                ]
+                label: 'Download',
+                icon: 'pi pi-cloud-download'
+            },
+            {
+                label: 'Sync',
+                icon: 'pi pi-refresh'
+            }
+        ]
+    },
+    {
+        label: 'Devices',
+        icon: 'pi pi-desktop',
+        items: [
+            {
+                label: 'Phone',
+                icon: 'pi pi-mobile'
+            },
+            {
+                label: 'Desktop',
+                icon: 'pi pi-desktop'
+            },
+            {
+                label: 'Tablet',
+                icon: 'pi pi-tablet'
             }
         ]
     }
diff --git a/doc/panelmenu/CommandDoc.vue b/doc/panelmenu/CommandDoc.vue
new file mode 100644
index 000000000..c24bc2dca
--- /dev/null
+++ b/doc/panelmenu/CommandDoc.vue
@@ -0,0 +1,225 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>The <i>command</i> property defines the callback to run when an item is activated by click or a key event.</p>
+    </DocSectionText>
+    <div class="card flex justify-content-center">
+        <PanelMenu :model="items" class="w-full md:w-20rem" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Files',
+                    icon: 'pi pi-file',
+                    items: [
+                        {
+                            label: 'New',
+                            icon: 'pi pi-plus',
+                            command: () => {
+                                this.$toast.add({ severity: 'success', summary: 'Success', detail: 'File created', life: 3000 });
+                            }
+                        },
+                        {
+                            label: 'Search',
+                            icon: 'pi pi-search',
+                            command: () => {
+                                this.$toast.add({ severity: 'warn', summary: 'Search Results', detail: 'No results found', life: 3000 });
+                            }
+                        },
+                        {
+                            label: 'Print',
+                            icon: 'pi pi-print',
+                            command: () => {
+                                this.$toast.add({ severity: 'error', summary: 'Error', detail: 'No printer connected', life: 3000 });
+                            }
+                        }
+                    ]
+                },
+                {
+                    label: 'Sync',
+                    icon: 'pi pi-cloud',
+                    items: [
+                        {
+                            label: 'Import',
+                            icon: 'pi pi-cloud-download',
+                            command: () => {
+                                this.$toast.add({ severity: 'info', summary: 'Downloads', detail: 'Downloaded from cloud', life: 3000 });
+                            }
+                        },
+                        {
+                            label: 'Export',
+                            icon: 'pi pi-cloud-upload',
+                            command: () => {
+                                this.$toast.add({ severity: 'info', summary: 'Shared', detail: 'Exported to cloud', life: 3000 });
+                            }
+                        }
+                    ]
+                },
+                {
+                    label: 'Sign Out',
+                    icon: 'pi pi-sign-out',
+                    command: () => {
+                        this.$toast.add({ severity: 'info', summary: 'Signed out', detail: 'User logged out', life: 3000 });
+                    }
+                }
+            ],
+            code: {
+                basic: `
+<PanelMenu :model="items" />
+<Toast />
+`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <PanelMenu :model="items" class="w-full md:w-20rem" />
+        <Toast />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Files',
+                    icon: 'pi pi-file',
+                    items: [
+                        {
+                            label: 'New',
+                            icon: 'pi pi-plus',
+                            command: () => {
+                                this.$toast.add({ severity: 'success', summary: 'Success', detail: 'File created', life: 3000 });
+                            }
+                        },
+                        {
+                            label: 'Search',
+                            icon: 'pi pi-search',
+                            command: () => {
+                                this.$toast.add({ severity: 'warn', summary: 'Search Results', detail: 'No results found', life: 3000 });
+                            }
+                        },
+                        {
+                            label: 'Print',
+                            icon: 'pi pi-print',
+                            command: () => {
+                                this.$toast.add({ severity: 'error', summary: 'Error', detail: 'No printer connected', life: 3000 });
+                            }
+                        }
+                    ]
+                },
+                {
+                    label: 'Sync',
+                    icon: 'pi pi-cloud',
+                    items: [
+                        {
+                            label: 'Import',
+                            icon: 'pi pi-cloud-download',
+                            command: () => {
+                                this.$toast.add({ severity: 'info', summary: 'Downloads', detail: 'Downloaded from cloud', life: 3000 });
+                            }
+                        },
+                        {
+                            label: 'Export',
+                            icon: 'pi pi-cloud-upload',
+                            command: () => {
+                                this.$toast.add({ severity: 'info', summary: 'Shared', detail: 'Exported to cloud', life: 3000 });
+                            }
+                        }
+                    ]
+                },
+                {
+                    label: 'Sign Out',
+                    icon: 'pi pi-sign-out',
+                    command: () => {
+                        this.$toast.add({ severity: 'info', summary: 'Signed out', detail: 'User logged out', life: 3000 });
+                    }
+                }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <PanelMenu :model="items" class="w-full md:w-20rem" />
+        <Toast />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useToast } from "primevue/usetoast";
+
+const toast = useToast();
+
+const items = ref([
+    {
+        label: 'Files',
+        icon: 'pi pi-file',
+        items: [
+            {
+                label: 'New',
+                icon: 'pi pi-plus',
+                command: () => {
+                    toast.add({ severity: 'success', summary: 'Success', detail: 'File created', life: 3000 });
+                }
+            },
+            {
+                label: 'Search',
+                icon: 'pi pi-search',
+                command: () => {
+                    toast.add({ severity: 'warn', summary: 'Search Results', detail: 'No results found', life: 3000 });
+                }
+            },
+            {
+                label: 'Print',
+                icon: 'pi pi-print',
+                command: () => {
+                    toast.add({ severity: 'error', summary: 'Error', detail: 'No printer connected', life: 3000 });
+                }
+            }
+        ]
+    },
+    {
+        label: 'Sync',
+        icon: 'pi pi-cloud',
+        items: [
+            {
+                label: 'Import',
+                icon: 'pi pi-cloud-download',
+                command: () => {
+                    toast.add({ severity: 'info', summary: 'Downloads', detail: 'Downloaded from cloud', life: 3000 });
+                }
+            },
+            {
+                label: 'Export',
+                icon: 'pi pi-cloud-upload',
+                command: () => {
+                    toast.add({ severity: 'info', summary: 'Shared', detail: 'Exported to cloud', life: 3000 });
+                }
+            }
+        ]
+    },
+    {
+        label: 'Sign Out',
+        icon: 'pi pi-sign-out',
+        command: () => {
+            toast.add({ severity: 'info', summary: 'Signed out', detail: 'User logged out', life: 3000 });
+        }
+    }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/panelmenu/ControlledDoc.vue b/doc/panelmenu/ControlledDoc.vue
new file mode 100644
index 000000000..639c7305a
--- /dev/null
+++ b/doc/panelmenu/ControlledDoc.vue
@@ -0,0 +1,337 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            If the menuitem has a <i>key</i> defined, PanelMenu state can be controlled programmatically with the <i>expandedKeys</i> property that defines the keys that are expanded. This property is a Map instance whose key is the key of a node and
+            value is a boolean.
+        </p>
+    </DocSectionText>
+    <div class="card flex flex-column align-items-center gap-3">
+        <Button type="button" label="Toggle All" text @click="toggleAll" />
+        <PanelMenu v-model:expandedKeys="expandedKeys" :model="items" class="w-full md:w-20rem" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            expandedKeys: {},
+            items: [
+                {
+                    key: '0',
+                    label: 'Users',
+                    icon: 'pi pi-users',
+                    items: [
+                        {
+                            key: '0_1',
+                            label: 'New',
+                            items: [
+                                {
+                                    key: '0_1_0',
+                                    label: 'Member'
+                                },
+                                {
+                                    key: '0_1_1',
+                                    label: 'Group'
+                                }
+                            ]
+                        },
+                        {
+                            key: '0_2',
+                            label: 'Search'
+                        }
+                    ]
+                },
+                {
+                    key: '1',
+                    label: 'Tasks',
+                    icon: 'pi pi-server',
+                    items: [
+                        {
+                            key: '1_0',
+                            label: 'Add New'
+                        },
+                        {
+                            key: '1_1',
+                            label: 'Pending'
+                        },
+                        {
+                            key: '1_2',
+                            label: 'Overdue'
+                        }
+                    ]
+                },
+                {
+                    key: '2',
+                    label: 'Calendar',
+                    icon: 'pi pi-calendar',
+                    items: [
+                        {
+                            key: '2_0',
+                            label: 'New Event'
+                        },
+                        {
+                            key: '2_1',
+                            label: 'Today'
+                        },
+                        {
+                            key: '2_2',
+                            label: 'This Week'
+                        }
+                    ]
+                }
+            ],
+            code: {
+                basic: `
+<Button type="button" label="Toggle All" text @click="toggleAll" />
+<PanelMenu v-model:expandedKeys="expandedKeys" :model="items" />
+`,
+                options: `
+<template>
+    <div class="card flex flex-column align-items-center gap-3">
+        <Button type="button" label="Toggle All" text @click="toggleAll" />
+        <PanelMenu v-model:expandedKeys="expandedKeys" :model="items" class="w-full md:w-20rem" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            expandedKeys: {},
+            items: [
+                {
+                    key: '0',
+                    label: 'Users',
+                    icon: 'pi pi-users',
+                    items: [
+                        {
+                            key: '0_1',
+                            label: 'New',
+                            items: [
+                                {
+                                    key: '0_1_0',
+                                    label: 'Member'
+                                },
+                                {
+                                    key: '0_1_1',
+                                    label: 'Group'
+                                }
+                            ]
+                        },
+                        {
+                            key: '0_2',
+                            label: 'Search'
+                        }
+                    ]
+                },
+                {
+                    key: '1',
+                    label: 'Tasks',
+                    icon: 'pi pi-server',
+                    items: [
+                        {
+                            key: '1_0',
+                            label: 'Add New'
+                        },
+                        {
+                            key: '1_1',
+                            label: 'Pending'
+                        },
+                        {
+                            key: '1_2',
+                            label: 'Overdue'
+                        }
+                    ]
+                },
+                {
+                    key: '2',
+                    label: 'Calendar',
+                    icon: 'pi pi-calendar',
+                    items: [
+                        {
+                            key: '2_0',
+                            label: 'New Event'
+                        },
+                        {
+                            key: '2_1',
+                            label: 'Today'
+                        },
+                        {
+                            key: '2_2',
+                            label: 'This Week'
+                        }
+                    ]
+                }
+            ]
+        };
+    },
+    methods: {
+        toggleAll() {
+            if (Object.keys(this.expandedKeys).length) this.collapseAll();
+            else this.expandAll();
+        },
+        expandAll() {
+            for (let node of this.items) {
+                this.expandNode(node);
+            }
+
+            this.expandedKeys = {
+                ...this.expandedKeys
+            };
+        },
+        collapseAll() {
+            this.expandedKeys = {};
+        },
+        expandNode(node) {
+            if (node.items && node.items.length) {
+                this.expandedKeys[node.key] = true;
+
+                for (let child of node.items) {
+                    this.expandNode(child);
+                }
+            }
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-column align-items-center gap-3">
+        <Button type="button" label="Toggle All" text @click="toggleAll" />
+        <PanelMenu v-model:expandedKeys="expandedKeys" :model="items" class="w-full md:w-20rem" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const expandedKeys = ref({});
+const items = ref([
+    {
+        key: '0',
+        label: 'Users',
+        icon: 'pi pi-users',
+        items: [
+            {
+                key: '0_1',
+                label: 'New',
+                items: [
+                    {
+                        key: '0_1_0',
+                        label: 'Member'
+                    },
+                    {
+                        key: '0_1_1',
+                        label: 'Group'
+                    }
+                ]
+            },
+            {
+                key: '0_2',
+                label: 'Search'
+            }
+        ]
+    },
+    {
+        key: '1',
+        label: 'Tasks',
+        icon: 'pi pi-server',
+        items: [
+            {
+                key: '1_0',
+                label: 'Add New'
+            },
+            {
+                key: '1_1',
+                label: 'Pending'
+            },
+            {
+                key: '1_2',
+                label: 'Overdue'
+            }
+        ]
+    },
+    {
+        key: '2',
+        label: 'Calendar',
+        icon: 'pi pi-calendar',
+        items: [
+            {
+                key: '2_0',
+                label: 'New Event'
+            },
+            {
+                key: '2_1',
+                label: 'Today'
+            },
+            {
+                key: '2_2',
+                label: 'This Week'
+            }
+        ]
+    }
+]);
+
+const toggleAll = () => {
+    if (Object.keys(expandedKeys.value).length) collapseAll();
+    else expandAll();
+}
+
+const expandAll = () => {
+    for (let node of items.value) {
+        expandNode(node);
+    }
+
+    expandedKeys.value = {...expandedKeys.value};
+};
+
+const collapseAll = () => {
+    expandedKeys.value = {};
+};
+
+const expandNode = (node) => {
+    if (node.items && node.items.length) {
+        expandedKeys.value[node.key] = true;
+
+        for (let child of node.items) {
+            expandNode(child);
+        }
+    }
+};
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        toggleAll() {
+            if (Object.keys(this.expandedKeys).length) this.collapseAll();
+            else this.expandAll();
+        },
+        expandAll() {
+            for (let node of this.items) {
+                this.expandNode(node);
+            }
+
+            this.expandedKeys = {
+                ...this.expandedKeys
+            };
+        },
+        collapseAll() {
+            this.expandedKeys = {};
+        },
+        expandNode(node) {
+            if (node.items && node.items.length) {
+                this.expandedKeys[node.key] = true;
+
+                for (let child of node.items) {
+                    this.expandNode(child);
+                }
+            }
+        }
+    }
+};
+</script>
diff --git a/doc/panelmenu/MultipleDoc.vue b/doc/panelmenu/MultipleDoc.vue
deleted file mode 100644
index e4874ada7..000000000
--- a/doc/panelmenu/MultipleDoc.vue
+++ /dev/null
@@ -1,497 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Only one single root menuitem can be active by default, enable <i>expandedKeys</i> property to be able to open more than one items.</p>
-    </DocSectionText>
-    <div class="card flex flex-column align-items-center">
-        <PanelMenu v-model:expandedKeys="expandedKeys" :model="items" class="w-full md:w-25rem" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            expandedKeys: {},
-            items: [
-                {
-                    key: '0',
-                    label: 'File',
-                    icon: 'pi pi-fw pi-file',
-                    items: [
-                        {
-                            key: '0_0',
-                            label: 'New',
-                            icon: 'pi pi-fw pi-plus',
-                            items: [
-                                {
-                                    key: '0_0_0',
-                                    label: 'Bookmark',
-                                    icon: 'pi pi-fw pi-bookmark'
-                                },
-                                {
-                                    key: '0_0_1',
-                                    label: 'Video',
-                                    icon: 'pi pi-fw pi-video'
-                                }
-                            ]
-                        },
-                        {
-                            key: '0_1',
-                            label: 'Delete',
-                            icon: 'pi pi-fw pi-trash'
-                        },
-                        {
-                            key: '0_2',
-                            label: 'Export',
-                            icon: 'pi pi-fw pi-external-link'
-                        }
-                    ]
-                },
-                {
-                    key: '1',
-                    label: 'Edit',
-                    icon: 'pi pi-fw pi-pencil',
-                    items: [
-                        {
-                            key: '1_0',
-                            label: 'Left',
-                            icon: 'pi pi-fw pi-align-left'
-                        },
-                        {
-                            key: '1_1',
-                            label: 'Right',
-                            icon: 'pi pi-fw pi-align-right'
-                        },
-                        {
-                            key: '1_2',
-                            label: 'Center',
-                            icon: 'pi pi-fw pi-align-center'
-                        },
-                        {
-                            key: '1_3',
-                            label: 'Justify',
-                            icon: 'pi pi-fw pi-align-justify'
-                        }
-                    ]
-                },
-                {
-                    key: '2',
-                    label: 'Users',
-                    icon: 'pi pi-fw pi-user',
-                    items: [
-                        {
-                            key: '2_0',
-                            label: 'New',
-                            icon: 'pi pi-fw pi-user-plus'
-                        },
-                        {
-                            key: '2_1',
-                            label: 'Delete',
-                            icon: 'pi pi-fw pi-user-minus'
-                        },
-                        {
-                            key: '2_2',
-                            label: 'Search',
-                            icon: 'pi pi-fw pi-users',
-                            items: [
-                                {
-                                    key: '2_2_0',
-                                    label: 'Filter',
-                                    icon: 'pi pi-fw pi-filter',
-                                    items: [
-                                        {
-                                            key: '2_2_0_0',
-                                            label: 'Print',
-                                            icon: 'pi pi-fw pi-print'
-                                        }
-                                    ]
-                                },
-                                {
-                                    key: '2_2_1',
-                                    icon: 'pi pi-fw pi-bars',
-                                    label: 'List'
-                                }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    key: '3',
-                    label: 'Events',
-                    icon: 'pi pi-fw pi-calendar',
-                    items: [
-                        {
-                            key: '3_0',
-                            label: 'Edit',
-                            icon: 'pi pi-fw pi-pencil',
-                            items: [
-                                {
-                                    key: '3_0_0',
-                                    label: 'Save',
-                                    icon: 'pi pi-fw pi-calendar-plus'
-                                },
-                                {
-                                    key: '3_0_0',
-                                    label: 'Delete',
-                                    icon: 'pi pi-fw pi-calendar-minus'
-                                }
-                            ]
-                        },
-                        {
-                            key: '3_1',
-                            label: 'Archive',
-                            icon: 'pi pi-fw pi-calendar-times',
-                            items: [
-                                {
-                                    key: '3_1_0',
-                                    label: 'Remove',
-                                    icon: 'pi pi-fw pi-calendar-minus'
-                                }
-                            ]
-                        }
-                    ]
-                }
-            ],
-            code: {
-                basic: `
-<PanelMenu v-model:expandedKeys="expandedKeys" :model="items" />
-`,
-                options: `
-<template>
-    <div class="card flex flex-column align-items-center">
-        <PanelMenu v-model:expandedKeys="expandedKeys" :model="items" class="w-full md:w-25rem" />
-    </div>
-</template>
-
-<script>
-export default {
-  data() {
-      return {
-          expandedKeys: {},
-          items: [
-              {
-                  key: '0',
-                  label: 'File',
-                  icon: 'pi pi-fw pi-file',
-                  items: [
-                      {
-                          key: '0_0',
-                          label: 'New',
-                          icon: 'pi pi-fw pi-plus',
-                          items: [
-                              {
-                                  key: '0_0_0',
-                                  label: 'Bookmark',
-                                  icon: 'pi pi-fw pi-bookmark'
-                              },
-                              {
-                                  key: '0_0_1',
-                                  label: 'Video',
-                                  icon: 'pi pi-fw pi-video'
-                              }
-                          ]
-                      },
-                      {
-                          key: '0_1',
-                          label: 'Delete',
-                          icon: 'pi pi-fw pi-trash'
-                      },
-                      {
-                          key: '0_2',
-                          label: 'Export',
-                          icon: 'pi pi-fw pi-external-link'
-                      }
-                  ]
-              },
-              {
-                  key: '1',
-                  label: 'Edit',
-                  icon: 'pi pi-fw pi-pencil',
-                  items: [
-                      {
-                          key: '1_0',
-                          label: 'Left',
-                          icon: 'pi pi-fw pi-align-left'
-                      },
-                      {
-                          key: '1_1',
-                          label: 'Right',
-                          icon: 'pi pi-fw pi-align-right'
-                      },
-                      {
-                          key: '1_2',
-                          label: 'Center',
-                          icon: 'pi pi-fw pi-align-center'
-                      },
-                      {
-                          key: '1_3',
-                          label: 'Justify',
-                          icon: 'pi pi-fw pi-align-justify'
-                      }
-                  ]
-              },
-              {
-                  key: '2',
-                  label: 'Users',
-                  icon: 'pi pi-fw pi-user',
-                  items: [
-                      {
-                          key: '2_0',
-                          label: 'New',
-                          icon: 'pi pi-fw pi-user-plus'
-                      },
-                      {
-                          key: '2_1',
-                          label: 'Delete',
-                          icon: 'pi pi-fw pi-user-minus'
-                      },
-                      {
-                          key: '2_2',
-                          label: 'Search',
-                          icon: 'pi pi-fw pi-users',
-                          items: [
-                              {
-                                  key: '2_2_0',
-                                  label: 'Filter',
-                                  icon: 'pi pi-fw pi-filter',
-                                  items: [
-                                      {
-                                          key: '2_2_0_0',
-                                          label: 'Print',
-                                          icon: 'pi pi-fw pi-print'
-                                      }
-                                  ]
-                              },
-                              {
-                                  key: '2_2_1',
-                                  icon: 'pi pi-fw pi-bars',
-                                  label: 'List'
-                              }
-                          ]
-                      }
-                  ]
-              },
-              {
-                  key: '3',
-                  label: 'Events',
-                  icon: 'pi pi-fw pi-calendar',
-                  items: [
-                      {
-                          key: '3_0',
-                          label: 'Edit',
-                          icon: 'pi pi-fw pi-pencil',
-                          items: [
-                              {
-                                  key: '3_0_0',
-                                  label: 'Save',
-                                  icon: 'pi pi-fw pi-calendar-plus'
-                              },
-                              {
-                                  key: '3_0_0',
-                                  label: 'Delete',
-                                  icon: 'pi pi-fw pi-calendar-minus'
-                              }
-                          ]
-                      },
-                      {
-                          key: '3_1',
-                          label: 'Archive',
-                          icon: 'pi pi-fw pi-calendar-times',
-                          items: [
-                              {
-                                  key: '3_1_0',
-                                  label: 'Remove',
-                                  icon: 'pi pi-fw pi-calendar-minus'
-                              }
-                          ]
-                      }
-                  ]
-              }
-          ]
-      };
-  },
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-column align-items-center">
-        <PanelMenu v-model:expandedKeys="expandedKeys" :model="items" class="w-full md:w-25rem"  />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const expandedKeys = ref({});
-const items = ref([
-  {
-      key: '0',
-      label: 'File',
-      icon: 'pi pi-fw pi-file',
-      items: [
-          {
-              key: '0_0',
-              label: 'New',
-              icon: 'pi pi-fw pi-plus',
-              items: [
-                  {
-                      key: '0_0_0',
-                      label: 'Bookmark',
-                      icon: 'pi pi-fw pi-bookmark'
-                  },
-                  {
-                      key: '0_0_1',
-                      label: 'Video',
-                      icon: 'pi pi-fw pi-video'
-                  }
-              ]
-          },
-          {
-              key: '0_1',
-              label: 'Delete',
-              icon: 'pi pi-fw pi-trash'
-          },
-          {
-              key: '0_2',
-              label: 'Export',
-              icon: 'pi pi-fw pi-external-link'
-          }
-      ]
-  },
-  {
-      key: '1',
-      label: 'Edit',
-      icon: 'pi pi-fw pi-pencil',
-      items: [
-          {
-              key: '1_0',
-              label: 'Left',
-              icon: 'pi pi-fw pi-align-left'
-          },
-          {
-              key: '1_1',
-              label: 'Right',
-              icon: 'pi pi-fw pi-align-right'
-          },
-          {
-              key: '1_2',
-              label: 'Center',
-              icon: 'pi pi-fw pi-align-center'
-          },
-          {
-              key: '1_3',
-              label: 'Justify',
-              icon: 'pi pi-fw pi-align-justify'
-          }
-      ]
-  },
-  {
-      key: '2',
-      label: 'Users',
-      icon: 'pi pi-fw pi-user',
-      items: [
-          {
-              key: '2_0',
-              label: 'New',
-              icon: 'pi pi-fw pi-user-plus'
-          },
-          {
-              key: '2_1',
-              label: 'Delete',
-              icon: 'pi pi-fw pi-user-minus'
-          },
-          {
-              key: '2_2',
-              label: 'Search',
-              icon: 'pi pi-fw pi-users',
-              items: [
-                  {
-                      key: '2_2_0',
-                      label: 'Filter',
-                      icon: 'pi pi-fw pi-filter',
-                      items: [
-                          {
-                              key: '2_2_0_0',
-                              label: 'Print',
-                              icon: 'pi pi-fw pi-print'
-                          }
-                      ]
-                  },
-                  {
-                      key: '2_2_1',
-                      icon: 'pi pi-fw pi-bars',
-                      label: 'List'
-                  }
-              ]
-          }
-      ]
-  },
-  {
-      key: '3',
-      label: 'Events',
-      icon: 'pi pi-fw pi-calendar',
-      items: [
-          {
-              key: '3_0',
-              label: 'Edit',
-              icon: 'pi pi-fw pi-pencil',
-              items: [
-                  {
-                      key: '3_0_0',
-                      label: 'Save',
-                      icon: 'pi pi-fw pi-calendar-plus'
-                  },
-                  {
-                      key: '3_0_0',
-                      label: 'Delete',
-                      icon: 'pi pi-fw pi-calendar-minus'
-                  }
-              ]
-          },
-          {
-              key: '3_1',
-              label: 'Archive',
-              icon: 'pi pi-fw pi-calendar-times',
-              items: [
-                  {
-                      key: '3_1_0',
-                      label: 'Remove',
-                      icon: 'pi pi-fw pi-calendar-minus'
-                  }
-              ]
-          }
-      ]
-  }
-]);
-
-
-const expandAll = () => {
-  for (let node of items.value) {
-      expandNode(node);
-  }
-
-  expandedKeys.value = {...expandedKeys.value};
-};
-
-const collapseAll = () => {
-  expandedKeys.value = {};
-};
-
-const expandNode = (node) => {
-  if (node.items && node.items.length) {
-      expandedKeys.value[node.key] = true;
-
-      for (let child of node.items) {
-          expandNode(child);
-      }
-  }
-};
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/panelmenu/ProgrammaticDoc.vue b/doc/panelmenu/ProgrammaticDoc.vue
deleted file mode 100644
index 378a4b9c6..000000000
--- a/doc/panelmenu/ProgrammaticDoc.vue
+++ /dev/null
@@ -1,558 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            If the menuitem has a <i>key</i> defined, PanelMenu state can be controlled programmatically with the <i>expandedKeys</i> property that defines the keys that are expanded. This property is a Map instance whose key is the key of a node and
-            value is a boolean. Note that <i>expandedKeys</i> also supports two-way binding with the v-model directive.
-        </p>
-    </DocSectionText>
-    <div class="card flex flex-column align-items-center">
-        <div class="mb-3">
-            <Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" class="mr-2" />
-            <Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
-        </div>
-        <PanelMenu v-model:expandedKeys="expandedKeys" :model="items" class="w-full md:w-25rem" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            expandedKeys: {},
-            items: [
-                {
-                    key: '0',
-                    label: 'File',
-                    icon: 'pi pi-fw pi-file',
-                    items: [
-                        {
-                            key: '0_0',
-                            label: 'New',
-                            icon: 'pi pi-fw pi-plus',
-                            items: [
-                                {
-                                    key: '0_0_0',
-                                    label: 'Bookmark',
-                                    icon: 'pi pi-fw pi-bookmark'
-                                },
-                                {
-                                    key: '0_0_1',
-                                    label: 'Video',
-                                    icon: 'pi pi-fw pi-video'
-                                }
-                            ]
-                        },
-                        {
-                            key: '0_1',
-                            label: 'Delete',
-                            icon: 'pi pi-fw pi-trash'
-                        },
-                        {
-                            key: '0_2',
-                            label: 'Export',
-                            icon: 'pi pi-fw pi-external-link'
-                        }
-                    ]
-                },
-                {
-                    key: '1',
-                    label: 'Edit',
-                    icon: 'pi pi-fw pi-pencil',
-                    items: [
-                        {
-                            key: '1_0',
-                            label: 'Left',
-                            icon: 'pi pi-fw pi-align-left'
-                        },
-                        {
-                            key: '1_1',
-                            label: 'Right',
-                            icon: 'pi pi-fw pi-align-right'
-                        },
-                        {
-                            key: '1_2',
-                            label: 'Center',
-                            icon: 'pi pi-fw pi-align-center'
-                        },
-                        {
-                            key: '1_3',
-                            label: 'Justify',
-                            icon: 'pi pi-fw pi-align-justify'
-                        }
-                    ]
-                },
-                {
-                    key: '2',
-                    label: 'Users',
-                    icon: 'pi pi-fw pi-user',
-                    items: [
-                        {
-                            key: '2_0',
-                            label: 'New',
-                            icon: 'pi pi-fw pi-user-plus'
-                        },
-                        {
-                            key: '2_1',
-                            label: 'Delete',
-                            icon: 'pi pi-fw pi-user-minus'
-                        },
-                        {
-                            key: '2_2',
-                            label: 'Search',
-                            icon: 'pi pi-fw pi-users',
-                            items: [
-                                {
-                                    key: '2_2_0',
-                                    label: 'Filter',
-                                    icon: 'pi pi-fw pi-filter',
-                                    items: [
-                                        {
-                                            key: '2_2_0_0',
-                                            label: 'Print',
-                                            icon: 'pi pi-fw pi-print'
-                                        }
-                                    ]
-                                },
-                                {
-                                    key: '2_2_1',
-                                    icon: 'pi pi-fw pi-bars',
-                                    label: 'List'
-                                }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    key: '3',
-                    label: 'Events',
-                    icon: 'pi pi-fw pi-calendar',
-                    items: [
-                        {
-                            key: '3_0',
-                            label: 'Edit',
-                            icon: 'pi pi-fw pi-pencil',
-                            items: [
-                                {
-                                    key: '3_0_0',
-                                    label: 'Save',
-                                    icon: 'pi pi-fw pi-calendar-plus'
-                                },
-                                {
-                                    key: '3_0_0',
-                                    label: 'Delete',
-                                    icon: 'pi pi-fw pi-calendar-minus'
-                                }
-                            ]
-                        },
-                        {
-                            key: '3_1',
-                            label: 'Archive',
-                            icon: 'pi pi-fw pi-calendar-times',
-                            items: [
-                                {
-                                    key: '3_1_0',
-                                    label: 'Remove',
-                                    icon: 'pi pi-fw pi-calendar-minus'
-                                }
-                            ]
-                        }
-                    ]
-                }
-            ],
-            code: {
-                basic: `
-<PanelMenu v-model:expandedKeys="expandedKeys" :model="items" />
-`,
-                options: `
-<template>
-    <div class="card flex flex-column align-items-center">
-        <div class="mb-3">
-            <Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" class="mr-2" />
-            <Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
-        </div>
-        <PanelMenu v-model:expandedKeys="expandedKeys" :model="items" class="w-full md:w-25rem" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            expandedKeys: {},
-            items: [
-                {
-                    key: '0',
-                    label: 'File',
-                    icon: 'pi pi-fw pi-file',
-                    items: [
-                        {
-                            key: '0_0',
-                            label: 'New',
-                            icon: 'pi pi-fw pi-plus',
-                            items: [
-                                {
-                                    key: '0_0_0',
-                                    label: 'Bookmark',
-                                    icon: 'pi pi-fw pi-bookmark'
-                                },
-                                {
-                                    key: '0_0_1',
-                                    label: 'Video',
-                                    icon: 'pi pi-fw pi-video'
-                                }
-                            ]
-                        },
-                        {
-                            key: '0_1',
-                            label: 'Delete',
-                            icon: 'pi pi-fw pi-trash'
-                        },
-                        {
-                            key: '0_2',
-                            label: 'Export',
-                            icon: 'pi pi-fw pi-external-link'
-                        }
-                    ]
-                },
-                {
-                    key: '1',
-                    label: 'Edit',
-                    icon: 'pi pi-fw pi-pencil',
-                    items: [
-                        {
-                            key: '1_0',
-                            label: 'Left',
-                            icon: 'pi pi-fw pi-align-left'
-                        },
-                        {
-                            key: '1_1',
-                            label: 'Right',
-                            icon: 'pi pi-fw pi-align-right'
-                        },
-                        {
-                            key: '1_2',
-                            label: 'Center',
-                            icon: 'pi pi-fw pi-align-center'
-                        },
-                        {
-                            key: '1_3',
-                            label: 'Justify',
-                            icon: 'pi pi-fw pi-align-justify'
-                        }
-                    ]
-                },
-                {
-                    key: '2',
-                    label: 'Users',
-                    icon: 'pi pi-fw pi-user',
-                    items: [
-                        {
-                            key: '2_0',
-                            label: 'New',
-                            icon: 'pi pi-fw pi-user-plus'
-                        },
-                        {
-                            key: '2_1',
-                            label: 'Delete',
-                            icon: 'pi pi-fw pi-user-minus'
-                        },
-                        {
-                            key: '2_2',
-                            label: 'Search',
-                            icon: 'pi pi-fw pi-users',
-                            items: [
-                                {
-                                    key: '2_2_0',
-                                    label: 'Filter',
-                                    icon: 'pi pi-fw pi-filter',
-                                    items: [
-                                        {
-                                            key: '2_2_0_0',
-                                            label: 'Print',
-                                            icon: 'pi pi-fw pi-print'
-                                        }
-                                    ]
-                                },
-                                {
-                                    key: '2_2_1',
-                                    icon: 'pi pi-fw pi-bars',
-                                    label: 'List'
-                                }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    key: '3',
-                    label: 'Events',
-                    icon: 'pi pi-fw pi-calendar',
-                    items: [
-                        {
-                            key: '3_0',
-                            label: 'Edit',
-                            icon: 'pi pi-fw pi-pencil',
-                            items: [
-                                {
-                                    key: '3_0_0',
-                                    label: 'Save',
-                                    icon: 'pi pi-fw pi-calendar-plus'
-                                },
-                                {
-                                    key: '3_0_0',
-                                    label: 'Delete',
-                                    icon: 'pi pi-fw pi-calendar-minus'
-                                }
-                            ]
-                        },
-                        {
-                            key: '3_1',
-                            label: 'Archive',
-                            icon: 'pi pi-fw pi-calendar-times',
-                            items: [
-                                {
-                                    key: '3_1_0',
-                                    label: 'Remove',
-                                    icon: 'pi pi-fw pi-calendar-minus'
-                                }
-                            ]
-                        }
-                    ]
-                }
-            ]
-        };
-    },
-    methods: {
-        expandAll() {
-            for (let node of this.items) {
-                this.expandNode(node);
-            }
-
-            this.expandedKeys = {
-                ...this.expandedKeys
-            };
-        },
-        collapseAll() {
-            this.expandedKeys = {};
-        },
-        expandNode(node) {
-            if (node.items && node.items.length) {
-                this.expandedKeys[node.key] = true;
-
-                for (let child of node.items) {
-                    this.expandNode(child);
-                }
-            }
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-column align-items-center">
-        <div class="mb-3">
-            <Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" class="mr-2" />
-            <Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
-        </div>
-        <PanelMenu v-model:expandedKeys="expandedKeys" :model="items" class="w-full md:w-25rem"  />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const expandedKeys = ref({});
-const items = ref([
-    {
-        key: '0',
-        label: 'File',
-        icon: 'pi pi-fw pi-file',
-        items: [
-            {
-                key: '0_0',
-                label: 'New',
-                icon: 'pi pi-fw pi-plus',
-                items: [
-                    {
-                        key: '0_0_0',
-                        label: 'Bookmark',
-                        icon: 'pi pi-fw pi-bookmark'
-                    },
-                    {
-                        key: '0_0_1',
-                        label: 'Video',
-                        icon: 'pi pi-fw pi-video'
-                    }
-                ]
-            },
-            {
-                key: '0_1',
-                label: 'Delete',
-                icon: 'pi pi-fw pi-trash'
-            },
-            {
-                key: '0_2',
-                label: 'Export',
-                icon: 'pi pi-fw pi-external-link'
-            }
-        ]
-    },
-    {
-        key: '1',
-        label: 'Edit',
-        icon: 'pi pi-fw pi-pencil',
-        items: [
-            {
-                key: '1_0',
-                label: 'Left',
-                icon: 'pi pi-fw pi-align-left'
-            },
-            {
-                key: '1_1',
-                label: 'Right',
-                icon: 'pi pi-fw pi-align-right'
-            },
-            {
-                key: '1_2',
-                label: 'Center',
-                icon: 'pi pi-fw pi-align-center'
-            },
-            {
-                key: '1_3',
-                label: 'Justify',
-                icon: 'pi pi-fw pi-align-justify'
-            }
-        ]
-    },
-    {
-        key: '2',
-        label: 'Users',
-        icon: 'pi pi-fw pi-user',
-        items: [
-            {
-                key: '2_0',
-                label: 'New',
-                icon: 'pi pi-fw pi-user-plus'
-            },
-            {
-                key: '2_1',
-                label: 'Delete',
-                icon: 'pi pi-fw pi-user-minus'
-            },
-            {
-                key: '2_2',
-                label: 'Search',
-                icon: 'pi pi-fw pi-users',
-                items: [
-                    {
-                        key: '2_2_0',
-                        label: 'Filter',
-                        icon: 'pi pi-fw pi-filter',
-                        items: [
-                            {
-                                key: '2_2_0_0',
-                                label: 'Print',
-                                icon: 'pi pi-fw pi-print'
-                            }
-                        ]
-                    },
-                    {
-                        key: '2_2_1',
-                        icon: 'pi pi-fw pi-bars',
-                        label: 'List'
-                    }
-                ]
-            }
-        ]
-    },
-    {
-        key: '3',
-        label: 'Events',
-        icon: 'pi pi-fw pi-calendar',
-        items: [
-            {
-                key: '3_0',
-                label: 'Edit',
-                icon: 'pi pi-fw pi-pencil',
-                items: [
-                    {
-                        key: '3_0_0',
-                        label: 'Save',
-                        icon: 'pi pi-fw pi-calendar-plus'
-                    },
-                    {
-                        key: '3_0_0',
-                        label: 'Delete',
-                        icon: 'pi pi-fw pi-calendar-minus'
-                    }
-                ]
-            },
-            {
-                key: '3_1',
-                label: 'Archive',
-                icon: 'pi pi-fw pi-calendar-times',
-                items: [
-                    {
-                        key: '3_1_0',
-                        label: 'Remove',
-                        icon: 'pi pi-fw pi-calendar-minus'
-                    }
-                ]
-            }
-        ]
-    }
-]);
-
-
-const expandAll = () => {
-    for (let node of items.value) {
-        expandNode(node);
-    }
-
-    expandedKeys.value = {...expandedKeys.value};
-};
-
-const collapseAll = () => {
-    expandedKeys.value = {};
-};
-
-const expandNode = (node) => {
-    if (node.items && node.items.length) {
-        expandedKeys.value[node.key] = true;
-
-        for (let child of node.items) {
-            expandNode(child);
-        }
-    }
-};
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        expandAll() {
-            for (let node of this.items) {
-                this.expandNode(node);
-            }
-
-            this.expandedKeys = {
-                ...this.expandedKeys
-            };
-        },
-        collapseAll() {
-            this.expandedKeys = {};
-        },
-        expandNode(node) {
-            if (node.items && node.items.length) {
-                this.expandedKeys[node.key] = true;
-
-                for (let child of node.items) {
-                    this.expandNode(child);
-                }
-            }
-        }
-    }
-};
-</script>
diff --git a/doc/panelmenu/RouterDoc.vue b/doc/panelmenu/RouterDoc.vue
index dc9dc9f95..85f6cab1d 100644
--- a/doc/panelmenu/RouterDoc.vue
+++ b/doc/panelmenu/RouterDoc.vue
@@ -1,8 +1,233 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>
-            Since v3.33.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>.
-        </p>
+        <p>Items with navigation are defined with templating to be able to use a router link component, an external link or programmatic navigation.</p>
     </DocSectionText>
+    <div class="card flex justify-content-center">
+        <PanelMenu :model="items" class="w-full md:w-20rem">
+            <template #item="{ item }">
+                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
+                    <a v-ripple class="flex align-items-center cursor-pointer text-color px-3 py-2" :href="href" @click="navigate">
+                        <span :class="item.icon" />
+                        <span class="ml-2 text-color">{{ item.label }}</span>
+                    </a>
+                </router-link>
+                <a v-else v-ripple class="flex align-items-center cursor-pointer text-color px-3 py-2" :href="item.url" :target="item.target">
+                    <span :class="item.icon" />
+                    <span class="ml-2">{{ item.label }}</span>
+                    <span v-if="item.items" class="pi pi-angle-down text-primary ml-auto" />
+                </a>
+            </template>
+        </PanelMenu>
+    </div>
+    <DocSectionCode :code="code" hideStackBlitz hideCodeSandbox />
 </template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Router',
+                    icon: 'pi pi-palette',
+                    items: [
+                        {
+                            label: 'Styled',
+                            icon: 'pi pi-eraser',
+                            route: '/theming'
+                        },
+                        {
+                            label: 'Unstyled',
+                            icon: 'pi pi-heart',
+                            route: '/unstyled'
+                        }
+                    ]
+                },
+                {
+                    label: 'Programmatic',
+                    icon: 'pi pi-link',
+                    command: () => {
+                        this.$router.push('/installation');
+                    }
+                },
+                {
+                    label: 'External',
+                    icon: 'pi pi-home',
+                    items: [
+                        {
+                            label: 'Vue.js',
+                            icon: 'pi pi-star',
+                            url: 'https://vuejs.org/'
+                        },
+                        {
+                            label: 'Vite.js',
+                            icon: 'pi pi-bookmark',
+                            url: 'https://vuejs.org/'
+                        }
+                    ]
+                }
+            ],
+            code: {
+                basic: `
+<PanelMenu :model="items">
+    <template #item="{ item }">
+        <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
+            <a v-ripple class="flex align-items-center cursor-pointer text-color px-3 py-2" :href="href" @click="navigate">
+                <span :class="item.icon" />
+                <span class="ml-2 text-color">{{ item.label }}</span>
+            </a>
+        </router-link>
+        <a v-else v-ripple class="flex align-items-center cursor-pointer text-color px-3 py-2" :href="item.url" :target="item.target">
+            <span :class="item.icon" />
+            <span class="ml-2">{{ item.label }}</span>
+            <span v-if="item.items" class="pi pi-angle-down text-primary ml-auto" />
+        </a>
+    </template>
+</PanelMenu>
+`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <PanelMenu :model="items" class="w-full md:w-20rem">
+            <template #item="{ item }">
+                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
+                    <a v-ripple class="flex align-items-center cursor-pointer text-color px-3 py-2" :href="href" @click="navigate">
+                        <span :class="item.icon" />
+                        <span class="ml-2 text-color">{{ item.label }}</span>
+                    </a>
+                </router-link>
+                <a v-else v-ripple class="flex align-items-center cursor-pointer text-color px-3 py-2" :href="item.url" :target="item.target">
+                    <span :class="item.icon" />
+                    <span class="ml-2">{{ item.label }}</span>
+                    <span v-if="item.items" class="pi pi-angle-down text-primary ml-auto" />
+                </a>
+            </template>
+        </PanelMenu>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Router',
+                    icon: 'pi pi-palette',
+                    items: [
+                        {
+                            label: 'Styled',
+                            icon: 'pi pi-eraser',
+                            route: '/theming'
+                        },
+                        {
+                            label: 'Unstyled',
+                            icon: 'pi pi-heart',
+                            route: '/unstyled'
+                        }
+                    ]
+                },
+                {
+                    label: 'Programmatic',
+                    icon: 'pi pi-link',
+                    command: () => {
+                        this.$router.push('/installation');
+                    }
+                },
+                {
+                    label: 'External',
+                    icon: 'pi pi-home',
+                    items: [
+                        {
+                            label: 'Vue.js',
+                            icon: 'pi pi-star',
+                            url: 'https://vuejs.org/'
+                        },
+                        {
+                            label: 'Vite.js',
+                            icon: 'pi pi-bookmark',
+                            url: 'https://vuejs.org/'
+                        }
+                    ]
+                }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <PanelMenu :model="items" class="w-full md:w-20rem">
+            <template #item="{ item }">
+                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
+                    <a v-ripple class="flex align-items-center cursor-pointer text-color px-3 py-2" :href="href" @click="navigate">
+                        <span :class="item.icon" />
+                        <span class="ml-2 text-color">{{ item.label }}</span>
+                    </a>
+                </router-link>
+                <a v-else v-ripple class="flex align-items-center cursor-pointer text-color px-3 py-2" :href="item.url" :target="item.target">
+                    <span :class="item.icon" />
+                    <span class="ml-2">{{ item.label }}</span>
+                    <span v-if="item.items" class="pi pi-angle-down text-primary ml-auto" />
+                </a>
+            </template>
+        </PanelMenu>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useRouter } from "vue";
+
+const router = useRouter();
+
+const items = ref([
+    {
+        label: 'Router',
+        icon: 'pi pi-palette',
+        items: [
+            {
+                label: 'Styled',
+                icon: 'pi pi-eraser',
+                route: '/theming'
+            },
+            {
+                label: 'Unstyled',
+                icon: 'pi pi-heart',
+                route: '/unstyled'
+            }
+        ]
+    },
+    {
+        label: 'Programmatic',
+        icon: 'pi pi-link',
+        command: () => {
+            router.push('/installation');
+        }
+    },
+    {
+        label: 'External',
+        icon: 'pi pi-home',
+        items: [
+            {
+                label: 'Vue.js',
+                icon: 'pi pi-star',
+                url: 'https://vuejs.org/'
+            },
+            {
+                label: 'Vite.js',
+                icon: 'pi pi-bookmark',
+                url: 'https://vuejs.org/'
+            }
+        ]
+    }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/panelmenu/TemplateDoc.vue b/doc/panelmenu/TemplateDoc.vue
new file mode 100644
index 000000000..4566eaaf2
--- /dev/null
+++ b/doc/panelmenu/TemplateDoc.vue
@@ -0,0 +1,276 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>PanelMenu offers item customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
+    </DocSectionText>
+    <div class="card flex justify-content-center">
+        <PanelMenu :model="items" class="w-full md:w-20rem">
+            <template #item="{ item }">
+                <a v-ripple class="flex align-items-center px-3 py-2 cursor-pointer">
+                    <span :class="[item.icon, 'text-primary']" />
+                    <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-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
+                </a>
+            </template>
+        </PanelMenu>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Mail',
+                    icon: 'pi pi-envelope',
+                    badge: 5,
+                    items: [
+                        {
+                            label: 'Compose',
+                            icon: 'pi pi-file-edit',
+                            shortcut: '⌘+N'
+                        },
+                        {
+                            label: 'Inbox',
+                            icon: 'pi pi-inbox',
+                            badge: 5
+                        },
+                        {
+                            label: 'Sent',
+                            icon: 'pi pi-send',
+                            shortcut: '⌘+S'
+                        },
+                        {
+                            label: 'Trash',
+                            icon: 'pi pi-trash',
+                            shortcut: '⌘+T'
+                        }
+                    ]
+                },
+                {
+                    label: 'Reports',
+                    icon: 'pi pi-chart-bar',
+                    shortcut: '⌘+R',
+                    items: [
+                        {
+                            label: 'Sales',
+                            icon: 'pi pi-chart-line',
+                            badge: 3
+                        },
+                        {
+                            label: 'Products',
+                            icon: 'pi pi-list',
+                            badge: 6
+                        }
+                    ]
+                },
+                {
+                    label: 'Profile',
+                    icon: 'pi pi-user',
+                    shortcut: '⌘+W',
+                    items: [
+                        {
+                            label: 'Settings',
+                            icon: 'pi pi-cog',
+                            shortcut: '⌘+O'
+                        },
+                        {
+                            label: 'Privacy',
+                            icon: 'pi pi-shield',
+                            shortcut: '⌘+P'
+                        }
+                    ]
+                }
+            ],
+            code: {
+                basic: `
+<PanelMenu :model="items">
+    <template #item="{ item }">
+        <a v-ripple class="flex align-items-center px-3 py-2 cursor-pointer">
+            <span :class="[item.icon, 'text-primary']" />
+            <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-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
+        </a>
+    </template>
+</PanelMenu>
+`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <PanelMenu :model="items" class="w-full md:w-20rem">
+            <template #item="{ item }">
+                <a v-ripple class="flex align-items-center px-3 py-2 cursor-pointer">
+                    <span :class="[item.icon, 'text-primary']" />
+                    <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-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
+                </a>
+            </template>
+        </PanelMenu>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Mail',
+                    icon: 'pi pi-envelope',
+                    badge: 5,
+                    items: [
+                        {
+                            label: 'Compose',
+                            icon: 'pi pi-file-edit',
+                            shortcut: '⌘+N'
+                        },
+                        {
+                            label: 'Inbox',
+                            icon: 'pi pi-inbox',
+                            badge: 5
+                        },
+                        {
+                            label: 'Sent',
+                            icon: 'pi pi-send',
+                            shortcut: '⌘+S'
+                        },
+                        {
+                            label: 'Trash',
+                            icon: 'pi pi-trash',
+                            shortcut: '⌘+T'
+                        }
+                    ]
+                },
+                {
+                    label: 'Reports',
+                    icon: 'pi pi-chart-bar',
+                    shortcut: '⌘+R',
+                    items: [
+                        {
+                            label: 'Sales',
+                            icon: 'pi pi-chart-line',
+                            badge: 3
+                        },
+                        {
+                            label: 'Products',
+                            icon: 'pi pi-list',
+                            badge: 6
+                        }
+                    ]
+                },
+                {
+                    label: 'Profile',
+                    icon: 'pi pi-user',
+                    shortcut: '⌘+W',
+                    items: [
+                        {
+                            label: 'Settings',
+                            icon: 'pi pi-cog',
+                            shortcut: '⌘+O'
+                        },
+                        {
+                            label: 'Privacy',
+                            icon: 'pi pi-shield',
+                            shortcut: '⌘+P'
+                        }
+                    ]
+                }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <PanelMenu :model="items" class="w-full md:w-20rem">
+            <template #item="{ item }">
+                <a v-ripple class="flex align-items-center px-3 py-2 cursor-pointer">
+                    <span :class="[item.icon, 'text-primary']" />
+                    <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-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
+                </a>
+            </template>
+        </PanelMenu>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const items = ref([
+    {
+        label: 'Mail',
+        icon: 'pi pi-envelope',
+        badge: 5,
+        items: [
+            {
+                label: 'Compose',
+                icon: 'pi pi-file-edit',
+                shortcut: '⌘+N'
+            },
+            {
+                label: 'Inbox',
+                icon: 'pi pi-inbox',
+                badge: 5
+            },
+            {
+                label: 'Sent',
+                icon: 'pi pi-send',
+                shortcut: '⌘+S'
+            },
+            {
+                label: 'Trash',
+                icon: 'pi pi-trash',
+                shortcut: '⌘+T'
+            }
+        ]
+    },
+    {
+        label: 'Reports',
+        icon: 'pi pi-chart-bar',
+        shortcut: '⌘+R',
+        items: [
+            {
+                label: 'Sales',
+                icon: 'pi pi-chart-line',
+                badge: 3
+            },
+            {
+                label: 'Products',
+                icon: 'pi pi-list',
+                badge: 6
+            }
+        ]
+    },
+    {
+        label: 'Profile',
+        icon: 'pi pi-user',
+        shortcut: '⌘+W',
+        items: [
+            {
+                label: 'Settings',
+                icon: 'pi pi-cog',
+                shortcut: '⌘+O'
+            },
+            {
+                label: 'Privacy',
+                icon: 'pi pi-shield',
+                shortcut: '⌘+P'
+            }
+        ]
+    }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/pages/panelmenu/index.vue b/pages/panelmenu/index.vue
index 4da02de32..4dab34415 100755
--- a/pages/panelmenu/index.vue
+++ b/pages/panelmenu/index.vue
@@ -13,10 +13,11 @@
 <script>
 import AccessibilityDoc from '@/doc/panelmenu/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/panelmenu/BasicDoc.vue';
+import CommandDoc from '@/doc/panelmenu/CommandDoc.vue';
+import ControlledDoc from '@/doc/panelmenu/ControlledDoc.vue';
 import ImportDoc from '@/doc/panelmenu/ImportDoc.vue';
-import MultipleDoc from '@/doc/panelmenu/MultipleDoc.vue';
-import ProgrammaticDoc from '@/doc/panelmenu/ProgrammaticDoc.vue';
 import RouterDoc from '@/doc/panelmenu/RouterDoc.vue';
+import TemplateDoc from '@/doc/panelmenu/TemplateDoc.vue';
 import PTComponent from '@/doc/panelmenu/pt/index.vue';
 import ThemingDoc from '@/doc/panelmenu/theming/index.vue';
 
@@ -35,14 +36,19 @@ export default {
                     component: BasicDoc
                 },
                 {
-                    id: 'programmatic',
-                    label: 'Programmatic',
-                    component: ProgrammaticDoc
+                    id: 'controlled',
+                    label: 'Controlled',
+                    component: ControlledDoc
                 },
                 {
-                    id: 'multiple',
-                    label: 'Multiple',
-                    component: MultipleDoc
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
+                {
+                    id: 'command',
+                    label: 'Command',
+                    component: CommandDoc
                 },
                 {
                     id: 'router',