From ee7783f1af3139abf01ffbe09d3965fea6a8e679 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 6 Nov 2023 18:14:05 +0300
Subject: [PATCH] Update TieredMenu demos

---
 doc/menu/TemplateDoc.vue       |   8 +-
 doc/tieredmenu/BasicDoc.vue    | 357 +++++++------------------
 doc/tieredmenu/CommandDoc.vue  | 212 +++++++++++++++
 doc/tieredmenu/PopupDoc.vue    | 359 +++++++------------------
 doc/tieredmenu/RouterDoc.vue   | 470 +++++++--------------------------
 doc/tieredmenu/TemplateDoc.vue | 331 +++++++++++++++++++++++
 pages/tieredmenu/index.vue     |  12 +
 7 files changed, 840 insertions(+), 909 deletions(-)
 create mode 100644 doc/tieredmenu/CommandDoc.vue
 create mode 100644 doc/tieredmenu/TemplateDoc.vue

diff --git a/doc/menu/TemplateDoc.vue b/doc/menu/TemplateDoc.vue
index 189071990..a3a8f59cd 100644
--- a/doc/menu/TemplateDoc.vue
+++ b/doc/menu/TemplateDoc.vue
@@ -30,7 +30,7 @@
                     <span :class="item.icon" />
                     <span class="ml-2">{{ 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-sm p-1">{{ item.shortcut }}</span>
+                    <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>
             <template #end>
@@ -114,7 +114,7 @@ export default {
             <span :class="item.icon" />
             <span class="ml-2">{{ 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-sm p-1">{{ item.shortcut }}</span>
+            <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>
     <template #end>
@@ -155,7 +155,7 @@ export default {
                     <span :class="item.icon" />
                     <span class="ml-2">{{ 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-sm p-1">{{ item.shortcut }}</span>
+                    <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>
             <template #end>
@@ -250,7 +250,7 @@ export default {
                     <span :class="item.icon" />
                     <span class="ml-2">{{ 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-sm p-1">{{ item.shortcut }}</span>
+                    <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>
             <template #end>
diff --git a/doc/tieredmenu/BasicDoc.vue b/doc/tieredmenu/BasicDoc.vue
index cd7be8be2..645ca7695 100644
--- a/doc/tieredmenu/BasicDoc.vue
+++ b/doc/tieredmenu/BasicDoc.vue
@@ -15,127 +15,70 @@ export default {
             items: [
                 {
                     label: 'File',
-                    icon: 'pi pi-fw pi-file',
+                    icon: 'pi pi-file',
                     items: [
                         {
                             label: 'New',
-                            icon: 'pi pi-fw pi-plus',
+                            icon: 'pi pi-plus',
                             items: [
                                 {
-                                    label: 'Bookmark',
-                                    icon: 'pi pi-fw pi-bookmark'
+                                    label: 'Document',
+                                    icon: 'pi pi-file'
+                                },
+                                {
+                                    label: 'Image',
+                                    icon: 'pi pi-image'
                                 },
                                 {
                                     label: 'Video',
-                                    icon: 'pi pi-fw pi-video'
+                                    icon: 'pi pi-video'
                                 }
                             ]
                         },
                         {
-                            label: 'Delete',
-                            icon: 'pi pi-fw pi-trash'
+                            label: 'Open',
+                            icon: 'pi pi-folder-open'
                         },
                         {
-                            separator: true
-                        },
-                        {
-                            label: 'Export',
-                            icon: 'pi pi-fw pi-external-link'
+                            label: 'Print',
+                            icon: 'pi pi-print'
                         }
                     ]
                 },
                 {
                     label: 'Edit',
-                    icon: 'pi pi-fw pi-pencil',
+                    icon: 'pi pi-file-edit',
                     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: 'Copy',
+                            icon: 'pi pi-copy'
                         },
                         {
                             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',
-                                    items: [
-                                        {
-                                            label: 'Print',
-                                            icon: 'pi pi-fw pi-print'
-                                        }
-                                    ]
-                                },
-                                {
-                                    icon: 'pi pi-fw pi-bars',
-                                    label: 'List'
-                                }
-                            ]
+                            icon: 'pi pi-times'
                         }
                     ]
                 },
                 {
-                    label: 'Events',
-                    icon: 'pi pi-fw pi-calendar',
-                    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: 'Archive',
-                            icon: 'pi pi-fw pi-calendar-times',
-                            items: [
-                                {
-                                    label: 'Remove',
-                                    icon: 'pi pi-fw pi-calendar-minus'
-                                }
-                            ]
-                        }
-                    ]
+                    label: 'Search',
+                    icon: 'pi pi-search'
                 },
                 {
                     separator: true
                 },
                 {
-                    label: 'Quit',
-                    icon: 'pi pi-fw pi-power-off'
+                    label: 'Share',
+                    icon: 'pi pi-share-alt',
+                    items: [
+                        {
+                            label: 'Slack',
+                            icon: 'pi pi-slack'
+                        },
+                        {
+                            label: 'Whatsapp',
+                            icon: 'pi pi-whatsapp'
+                        }
+                    ]
                 }
             ],
             code: {
@@ -156,127 +99,70 @@ export default {
             items: [
                 {
                     label: 'File',
-                    icon: 'pi pi-fw pi-file',
+                    icon: 'pi pi-file',
                     items: [
                         {
                             label: 'New',
-                            icon: 'pi pi-fw pi-plus',
+                            icon: 'pi pi-plus',
                             items: [
                                 {
-                                    label: 'Bookmark',
-                                    icon: 'pi pi-fw pi-bookmark'
+                                    label: 'Document',
+                                    icon: 'pi pi-file'
+                                },
+                                {
+                                    label: 'Image',
+                                    icon: 'pi pi-image'
                                 },
                                 {
                                     label: 'Video',
-                                    icon: 'pi pi-fw pi-video'
+                                    icon: 'pi pi-video'
                                 }
                             ]
                         },
                         {
-                            label: 'Delete',
-                            icon: 'pi pi-fw pi-trash'
+                            label: 'Open',
+                            icon: 'pi pi-folder-open'
                         },
                         {
-                            separator: true
-                        },
-                        {
-                            label: 'Export',
-                            icon: 'pi pi-fw pi-external-link'
+                            label: 'Print',
+                            icon: 'pi pi-print'
                         }
                     ]
                 },
                 {
                     label: 'Edit',
-                    icon: 'pi pi-fw pi-pencil',
+                    icon: 'pi pi-file-edit',
                     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: 'Copy',
+                            icon: 'pi pi-copy'
                         },
                         {
                             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',
-                                    items: [
-                                        {
-                                            label: 'Print',
-                                            icon: 'pi pi-fw pi-print'
-                                        }
-                                    ]
-                                },
-                                {
-                                    icon: 'pi pi-fw pi-bars',
-                                    label: 'List'
-                                }
-                            ]
+                            icon: 'pi pi-times'
                         }
                     ]
                 },
                 {
-                    label: 'Events',
-                    icon: 'pi pi-fw pi-calendar',
-                    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: 'Archive',
-                            icon: 'pi pi-fw pi-calendar-times',
-                            items: [
-                                {
-                                    label: 'Remove',
-                                    icon: 'pi pi-fw pi-calendar-minus'
-                                }
-                            ]
-                        }
-                    ]
+                    label: 'Search',
+                    icon: 'pi pi-search'
                 },
                 {
                     separator: true
                 },
                 {
-                    label: 'Quit',
-                    icon: 'pi pi-fw pi-power-off'
+                    label: 'Share',
+                    icon: 'pi pi-share-alt',
+                    items: [
+                        {
+                            label: 'Slack',
+                            icon: 'pi pi-slack'
+                        },
+                        {
+                            label: 'Whatsapp',
+                            icon: 'pi pi-whatsapp'
+                        }
+                    ]
                 }
             ]
         };
@@ -297,127 +183,70 @@ import { ref } from "vue";
 const items = ref([
     {
         label: 'File',
-        icon: 'pi pi-fw pi-file',
+        icon: 'pi pi-file',
         items: [
             {
                 label: 'New',
-                icon: 'pi pi-fw pi-plus',
+                icon: 'pi pi-plus',
                 items: [
                     {
-                        label: 'Bookmark',
-                        icon: 'pi pi-fw pi-bookmark'
+                        label: 'Document',
+                        icon: 'pi pi-file'
+                    },
+                    {
+                        label: 'Image',
+                        icon: 'pi pi-image'
                     },
                     {
                         label: 'Video',
-                        icon: 'pi pi-fw pi-video'
+                        icon: 'pi pi-video'
                     }
                 ]
             },
             {
-                label: 'Delete',
-                icon: 'pi pi-fw pi-trash'
+                label: 'Open',
+                icon: 'pi pi-folder-open'
             },
             {
-                separator: true
-            },
-            {
-                label: 'Export',
-                icon: 'pi pi-fw pi-external-link'
+                label: 'Print',
+                icon: 'pi pi-print'
             }
         ]
     },
     {
         label: 'Edit',
-        icon: 'pi pi-fw pi-pencil',
+        icon: 'pi pi-file-edit',
         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: 'Copy',
+                icon: 'pi pi-copy'
             },
             {
                 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',
-                        items: [
-                            {
-                                label: 'Print',
-                                icon: 'pi pi-fw pi-print'
-                            }
-                        ]
-                    },
-                    {
-                        icon: 'pi pi-fw pi-bars',
-                        label: 'List'
-                    }
-                ]
+                icon: 'pi pi-times'
             }
         ]
     },
     {
-        label: 'Events',
-        icon: 'pi pi-fw pi-calendar',
-        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: 'Archive',
-                icon: 'pi pi-fw pi-calendar-times',
-                items: [
-                    {
-                        label: 'Remove',
-                        icon: 'pi pi-fw pi-calendar-minus'
-                    }
-                ]
-            }
-        ]
+        label: 'Search',
+        icon: 'pi pi-search'
     },
     {
         separator: true
     },
     {
-        label: 'Quit',
-        icon: 'pi pi-fw pi-power-off'
+        label: 'Share',
+        icon: 'pi pi-share-alt',
+        items: [
+            {
+                label: 'Slack',
+                icon: 'pi pi-slack'
+            },
+            {
+                label: 'Whatsapp',
+                icon: 'pi pi-whatsapp'
+            }
+        ]
     }
 ]);
 <\/script>
diff --git a/doc/tieredmenu/CommandDoc.vue b/doc/tieredmenu/CommandDoc.vue
new file mode 100644
index 000000000..9891df4ca
--- /dev/null
+++ b/doc/tieredmenu/CommandDoc.vue
@@ -0,0 +1,212 @@
+<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">
+        <TieredMenu :model="items" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'File',
+                    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: 'Print',
+                            icon: 'pi pi-print',
+                            command: () => {
+                                this.$toast.add({ severity: 'error', summary: 'Error', detail: 'No printer connected', life: 3000 });
+                            }
+                        }
+                    ]
+                },
+                {
+                    label: 'Search',
+                    icon: 'pi pi-search',
+                    command: () => {
+                        this.$toast.add({ severity: 'warn', summary: 'Search Results', detail: 'No results found', life: 3000 });
+                    }
+                },
+                {
+                    separator: true
+                },
+                {
+                    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 });
+                            }
+                        }
+                    ]
+                }
+            ],
+            code: {
+                basic: `
+<TieredMenu :model="items" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <TieredMenu :model="items" />
+        <Toast />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'File',
+                    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: 'Print',
+                            icon: 'pi pi-print',
+                            command: () => {
+                                this.$toast.add({ severity: 'error', summary: 'Error', detail: 'No printer connected', life: 3000 });
+                            }
+                        }
+                    ]
+                },
+                {
+                    label: 'Search',
+                    icon: 'pi pi-search',
+                    command: () => {
+                        this.$toast.add({ severity: 'warn', summary: 'Search Results', detail: 'No results found', life: 3000 });
+                    }
+                },
+                {
+                    separator: true
+                },
+                {
+                    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 });
+                            }
+                        }
+                    ]
+                }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <TieredMenu :model="items" />
+        <Toast />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useToast } from "primevue/usetoast";
+
+const toast = useToast();
+
+const items = ref([
+    {
+        label: 'File',
+        icon: 'pi pi-file',
+        items: [
+            {
+                label: 'New',
+                icon: 'pi pi-plus',
+                command: () => {
+                    toast.add({ severity: 'success', summary: 'Success', detail: 'File created', life: 3000 });
+                }
+            },
+            {
+                label: 'Print',
+                icon: 'pi pi-print',
+                command: () => {
+                    toast.add({ severity: 'error', summary: 'Error', detail: 'No printer connected', life: 3000 });
+                }
+            }
+        ]
+    },
+    {
+        label: 'Search',
+        icon: 'pi pi-search',
+        command: () => {
+            toast.add({ severity: 'warn', summary: 'Search Results', detail: 'No results found', life: 3000 });
+        }
+    },
+    {
+        separator: true
+    },
+    {
+        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 });
+                }
+            }
+        ]
+    }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/tieredmenu/PopupDoc.vue b/doc/tieredmenu/PopupDoc.vue
index 8514a70c8..c16c8ed90 100644
--- a/doc/tieredmenu/PopupDoc.vue
+++ b/doc/tieredmenu/PopupDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>TieredMenu is inline by default whereas popup mode is supported by enabling <i>popup</i> property and calling toggle method with an event of the target.</p>
+        <p>Overlay mode is enabled by adding <i>popup</i> property and calling <i>toggle</i> function of the menu ref with an event of the target.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
         <Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_tmenu" />
@@ -16,127 +16,70 @@ export default {
             items: [
                 {
                     label: 'File',
-                    icon: 'pi pi-fw pi-file',
+                    icon: 'pi pi-file',
                     items: [
                         {
                             label: 'New',
-                            icon: 'pi pi-fw pi-plus',
+                            icon: 'pi pi-plus',
                             items: [
                                 {
-                                    label: 'Bookmark',
-                                    icon: 'pi pi-fw pi-bookmark'
+                                    label: 'Document',
+                                    icon: 'pi pi-file'
+                                },
+                                {
+                                    label: 'Image',
+                                    icon: 'pi pi-image'
                                 },
                                 {
                                     label: 'Video',
-                                    icon: 'pi pi-fw pi-video'
+                                    icon: 'pi pi-video'
                                 }
                             ]
                         },
                         {
-                            label: 'Delete',
-                            icon: 'pi pi-fw pi-trash'
+                            label: 'Open',
+                            icon: 'pi pi-folder-open'
                         },
                         {
-                            separator: true
-                        },
-                        {
-                            label: 'Export',
-                            icon: 'pi pi-fw pi-external-link'
+                            label: 'Print',
+                            icon: 'pi pi-print'
                         }
                     ]
                 },
                 {
                     label: 'Edit',
-                    icon: 'pi pi-fw pi-pencil',
+                    icon: 'pi pi-file-edit',
                     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: 'Copy',
+                            icon: 'pi pi-copy'
                         },
                         {
                             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',
-                                    items: [
-                                        {
-                                            label: 'Print',
-                                            icon: 'pi pi-fw pi-print'
-                                        }
-                                    ]
-                                },
-                                {
-                                    icon: 'pi pi-fw pi-bars',
-                                    label: 'List'
-                                }
-                            ]
+                            icon: 'pi pi-times'
                         }
                     ]
                 },
                 {
-                    label: 'Events',
-                    icon: 'pi pi-fw pi-calendar',
-                    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: 'Archive',
-                            icon: 'pi pi-fw pi-calendar-times',
-                            items: [
-                                {
-                                    label: 'Remove',
-                                    icon: 'pi pi-fw pi-calendar-minus'
-                                }
-                            ]
-                        }
-                    ]
+                    label: 'Search',
+                    icon: 'pi pi-search'
                 },
                 {
                     separator: true
                 },
                 {
-                    label: 'Quit',
-                    icon: 'pi pi-fw pi-power-off'
+                    label: 'Share',
+                    icon: 'pi pi-share-alt',
+                    items: [
+                        {
+                            label: 'Slack',
+                            icon: 'pi pi-slack'
+                        },
+                        {
+                            label: 'Whatsapp',
+                            icon: 'pi pi-whatsapp'
+                        }
+                    ]
                 }
             ],
             code: {
@@ -159,127 +102,70 @@ export default {
             items: [
                 {
                     label: 'File',
-                    icon: 'pi pi-fw pi-file',
+                    icon: 'pi pi-file',
                     items: [
                         {
                             label: 'New',
-                            icon: 'pi pi-fw pi-plus',
+                            icon: 'pi pi-plus',
                             items: [
                                 {
-                                    label: 'Bookmark',
-                                    icon: 'pi pi-fw pi-bookmark'
+                                    label: 'Document',
+                                    icon: 'pi pi-file'
+                                },
+                                {
+                                    label: 'Image',
+                                    icon: 'pi pi-image'
                                 },
                                 {
                                     label: 'Video',
-                                    icon: 'pi pi-fw pi-video'
+                                    icon: 'pi pi-video'
                                 }
                             ]
                         },
                         {
-                            label: 'Delete',
-                            icon: 'pi pi-fw pi-trash'
+                            label: 'Open',
+                            icon: 'pi pi-folder-open'
                         },
                         {
-                            separator: true
-                        },
-                        {
-                            label: 'Export',
-                            icon: 'pi pi-fw pi-external-link'
+                            label: 'Print',
+                            icon: 'pi pi-print'
                         }
                     ]
                 },
                 {
                     label: 'Edit',
-                    icon: 'pi pi-fw pi-pencil',
+                    icon: 'pi pi-file-edit',
                     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: 'Copy',
+                            icon: 'pi pi-copy'
                         },
                         {
                             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',
-                                    items: [
-                                        {
-                                            label: 'Print',
-                                            icon: 'pi pi-fw pi-print'
-                                        }
-                                    ]
-                                },
-                                {
-                                    icon: 'pi pi-fw pi-bars',
-                                    label: 'List'
-                                }
-                            ]
+                            icon: 'pi pi-times'
                         }
                     ]
                 },
                 {
-                    label: 'Events',
-                    icon: 'pi pi-fw pi-calendar',
-                    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: 'Archive',
-                            icon: 'pi pi-fw pi-calendar-times',
-                            items: [
-                                {
-                                    label: 'Remove',
-                                    icon: 'pi pi-fw pi-calendar-minus'
-                                }
-                            ]
-                        }
-                    ]
+                    label: 'Search',
+                    icon: 'pi pi-search'
                 },
                 {
                     separator: true
                 },
                 {
-                    label: 'Quit',
-                    icon: 'pi pi-fw pi-power-off'
+                    label: 'Share',
+                    icon: 'pi pi-share-alt',
+                    items: [
+                        {
+                            label: 'Slack',
+                            icon: 'pi pi-slack'
+                        },
+                        {
+                            label: 'Whatsapp',
+                            icon: 'pi pi-whatsapp'
+                        }
+                    ]
                 }
             ]
         };
@@ -307,127 +193,70 @@ const menu = ref();
 const items = ref([
     {
         label: 'File',
-        icon: 'pi pi-fw pi-file',
+        icon: 'pi pi-file',
         items: [
             {
                 label: 'New',
-                icon: 'pi pi-fw pi-plus',
+                icon: 'pi pi-plus',
                 items: [
                     {
-                        label: 'Bookmark',
-                        icon: 'pi pi-fw pi-bookmark'
+                        label: 'Document',
+                        icon: 'pi pi-file'
+                    },
+                    {
+                        label: 'Image',
+                        icon: 'pi pi-image'
                     },
                     {
                         label: 'Video',
-                        icon: 'pi pi-fw pi-video'
+                        icon: 'pi pi-video'
                     }
                 ]
             },
             {
-                label: 'Delete',
-                icon: 'pi pi-fw pi-trash'
+                label: 'Open',
+                icon: 'pi pi-folder-open'
             },
             {
-                separator: true
-            },
-            {
-                label: 'Export',
-                icon: 'pi pi-fw pi-external-link'
+                label: 'Print',
+                icon: 'pi pi-print'
             }
         ]
     },
     {
         label: 'Edit',
-        icon: 'pi pi-fw pi-pencil',
+        icon: 'pi pi-file-edit',
         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: 'Copy',
+                icon: 'pi pi-copy'
             },
             {
                 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',
-                        items: [
-                            {
-                                label: 'Print',
-                                icon: 'pi pi-fw pi-print'
-                            }
-                        ]
-                    },
-                    {
-                        icon: 'pi pi-fw pi-bars',
-                        label: 'List'
-                    }
-                ]
+                icon: 'pi pi-times'
             }
         ]
     },
     {
-        label: 'Events',
-        icon: 'pi pi-fw pi-calendar',
-        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: 'Archive',
-                icon: 'pi pi-fw pi-calendar-times',
-                items: [
-                    {
-                        label: 'Remove',
-                        icon: 'pi pi-fw pi-calendar-minus'
-                    }
-                ]
-            }
-        ]
+        label: 'Search',
+        icon: 'pi pi-search'
     },
     {
         separator: true
     },
     {
-        label: 'Quit',
-        icon: 'pi pi-fw pi-power-off'
+        label: 'Share',
+        icon: 'pi pi-share-alt',
+        items: [
+            {
+                label: 'Slack',
+                icon: 'pi pi-slack'
+            },
+            {
+                label: 'Whatsapp',
+                icon: 'pi pi-whatsapp'
+            }
+        ]
     }
 ]);
 
diff --git a/doc/tieredmenu/RouterDoc.vue b/doc/tieredmenu/RouterDoc.vue
index 7f738ede7..df1445884 100644
--- a/doc/tieredmenu/RouterDoc.vue
+++ b/doc/tieredmenu/RouterDoc.vue
@@ -1,28 +1,25 @@
 <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>. Here is an example with vue-router.
-        </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">
         <TieredMenu :model="items">
-            <template #item="{ label, item, props, hasSubmenu }">
-                <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
-                    <a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)">
-                        <span v-bind="props.icon" />
-                        <span v-bind="props.label">{{ label }}</span>
+            <template #item="{ item, props, hasSubmenu }">
+                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
+                    <a v-ripple :href="href" v-bind="props.action" @click="navigate">
+                        <span :class="item.icon" />
+                        <span class="ml-2">{{ item.label }}</span>
                     </a>
                 </router-link>
-                <a v-else :href="item.url" :target="item.target" v-bind="props.action">
-                    <span v-bind="props.icon" />
-                    <span v-bind="props.label">{{ label }}</span>
+                <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
+                    <span :class="item.icon" />
+                    <span class="ml-2">{{ item.label }}</span>
                     <span v-if="hasSubmenu" class="pi pi-fw pi-angle-right" v-bind="props.submenuicon" />
                 </a>
             </template>
         </TieredMenu>
     </div>
-    <DocSectionCode :code="code" />
+    <DocSectionCode :code="code" hideStackBlitz hideCodeSandbox />
 </template>
 
 <script>
@@ -31,148 +28,54 @@ export default {
         return {
             items: [
                 {
-                    label: 'File',
-                    icon: 'pi pi-fw pi-file',
+                    label: 'Router',
+                    icon: 'pi pi-palette',
                     items: [
                         {
-                            label: 'New',
-                            icon: 'pi pi-fw pi-plus',
-                            items: [
-                                {
-                                    label: 'Bookmark',
-                                    icon: 'pi pi-fw pi-bookmark'
-                                },
-                                {
-                                    label: 'Video',
-                                    icon: 'pi pi-fw pi-video'
-                                }
-                            ]
+                            label: 'Styled',
+                            route: '/theming'
                         },
                         {
-                            label: 'Delete',
-                            icon: 'pi pi-fw pi-trash'
-                        },
-                        {
-                            separator: true
-                        },
-                        {
-                            label: 'Export',
-                            icon: 'pi pi-fw pi-external-link'
+                            label: 'Unstyled',
+                            route: '/unstyled'
                         }
                     ]
                 },
                 {
-                    label: 'Edit',
-                    icon: 'pi pi-fw pi-pencil',
+                    label: 'Programmatic',
+                    icon: 'pi pi-link',
+                    command: () => {
+                        this.$router.push('/installation');
+                    }
+                },
+                {
+                    label: 'External',
+                    icon: 'pi pi-home',
                     items: [
                         {
-                            label: 'Left',
-                            icon: 'pi pi-fw pi-align-left'
+                            label: 'Vue.js',
+                            url: 'https://vuejs.org/'
                         },
                         {
-                            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: 'Vite.js',
+                            url: 'https://vuejs.org/'
                         }
                     ]
-                },
-                {
-                    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',
-                                    items: [
-                                        {
-                                            label: 'Print',
-                                            icon: 'pi pi-fw pi-print'
-                                        }
-                                    ]
-                                },
-                                {
-                                    icon: 'pi pi-fw pi-bars',
-                                    label: 'List'
-                                }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    label: 'Events',
-                    icon: 'pi pi-fw pi-calendar',
-                    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: 'Archive',
-                            icon: 'pi pi-fw pi-calendar-times',
-                            items: [
-                                {
-                                    label: 'Remove',
-                                    icon: 'pi pi-fw pi-calendar-minus'
-                                }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    label: 'Upload',
-                    icon: 'pi pi-fw pi-upload',
-                    route: '/fileupload'
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Quit',
-                    icon: 'pi pi-fw pi-power-off'
                 }
             ],
             code: {
                 basic: `
 <TieredMenu :model="items">
-    <template #item="{ label, item, props, hasSubmenu }">
-        <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
-            <a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)">
-                <span v-bind="props.icon" />
-                <span v-bind="props.label">{{ label }}</span>
+    <template #item="{ item, props, hasSubmenu }">
+        <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
+            <a v-ripple :href="href" v-bind="props.action" @click="navigate">
+                <span :class="item.icon" />
+                <span class="ml-2">{{ item.label }}</span>
             </a>
         </router-link>
-        <a v-else :href="item.url" :target="item.target" v-bind="props.action">
-            <span v-bind="props.icon" />
-            <span v-bind="props.label">{{ label }}</span>
+        <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
+            <span :class="item.icon" />
+            <span class="ml-2">{{ item.label }}</span>
             <span v-if="hasSubmenu" class="pi pi-fw pi-angle-right" v-bind="props.submenuicon" />
         </a>
     </template>
@@ -182,16 +85,16 @@ export default {
 <template>
     <div class="card flex justify-content-center">
         <TieredMenu :model="items">
-            <template #item="{ label, item, props, hasSubmenu }">
-                <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
-                    <a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)">
-                        <span v-bind="props.icon" />
-                        <span v-bind="props.label">{{ label }}</span>
+            <template #item="{ item, props, hasSubmenu }">
+                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
+                    <a v-ripple :href="href" v-bind="props.action" @click="navigate">
+                        <span :class="item.icon" />
+                        <span class="ml-2">{{ item.label }}</span>
                     </a>
                 </router-link>
-                <a v-else :href="item.url" :target="item.target" v-bind="props.action">
-                    <span v-bind="props.icon" />
-                    <span v-bind="props.label">{{ label }}</span>
+                <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
+                    <span :class="item.icon" />
+                    <span class="ml-2">{{ item.label }}</span>
                     <span v-if="hasSubmenu" class="pi pi-fw pi-angle-right" v-bind="props.submenuicon" />
                 </a>
             </template>
@@ -205,133 +108,39 @@ export default {
         return {
             items: [
                 {
-                    label: 'File',
-                    icon: 'pi pi-fw pi-file',
+                    label: 'Router',
+                    icon: 'pi pi-palette',
                     items: [
                         {
-                            label: 'New',
-                            icon: 'pi pi-fw pi-plus',
-                            items: [
-                                {
-                                    label: 'Bookmark',
-                                    icon: 'pi pi-fw pi-bookmark'
-                                },
-                                {
-                                    label: 'Video',
-                                    icon: 'pi pi-fw pi-video'
-                                }
-                            ]
+                            label: 'Styled',
+                            route: '/theming'
                         },
                         {
-                            label: 'Delete',
-                            icon: 'pi pi-fw pi-trash'
-                        },
-                        {
-                            separator: true
-                        },
-                        {
-                            label: 'Export',
-                            icon: 'pi pi-fw pi-external-link'
+                            label: 'Unstyled',
+                            route: '/unstyled'
                         }
                     ]
                 },
                 {
-                    label: 'Edit',
-                    icon: 'pi pi-fw pi-pencil',
+                    label: 'Programmatic',
+                    icon: 'pi pi-link',
+                    command: () => {
+                        this.$router.push('/installation');
+                    }
+                },
+                {
+                    label: 'External',
+                    icon: 'pi pi-home',
                     items: [
                         {
-                            label: 'Left',
-                            icon: 'pi pi-fw pi-align-left'
+                            label: 'Vue.js',
+                            url: 'https://vuejs.org/'
                         },
                         {
-                            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: 'Vite.js',
+                            url: 'https://vuejs.org/'
                         }
                     ]
-                },
-                {
-                    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',
-                                    items: [
-                                        {
-                                            label: 'Print',
-                                            icon: 'pi pi-fw pi-print'
-                                        }
-                                    ]
-                                },
-                                {
-                                    icon: 'pi pi-fw pi-bars',
-                                    label: 'List'
-                                }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    label: 'Events',
-                    icon: 'pi pi-fw pi-calendar',
-                    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: 'Archive',
-                            icon: 'pi pi-fw pi-calendar-times',
-                            items: [
-                                {
-                                    label: 'Remove',
-                                    icon: 'pi pi-fw pi-calendar-minus'
-                                }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    label: 'Upload',
-                    icon: 'pi pi-fw pi-upload',
-                    route: '/fileupload'
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Quit',
-                    icon: 'pi pi-fw pi-power-off'
                 }
             ]
         };
@@ -343,16 +152,16 @@ export default {
 <template>
     <div class="card flex justify-content-center">
         <TieredMenu :model="items">
-            <template #item="{ label, item, props, hasSubmenu }">
-                <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
-                    <a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)">
-                        <span v-bind="props.icon" />
-                        <span v-bind="props.label">{{ label }}</span>
+            <template #item="{ item, props, hasSubmenu }">
+                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
+                    <a v-ripple :href="href" v-bind="props.action" @click="navigate">
+                        <span :class="item.icon" />
+                        <span class="ml-2">{{ item.label }}</span>
                     </a>
                 </router-link>
-                <a v-else :href="item.url" :target="item.target" v-bind="props.action">
-                    <span v-bind="props.icon" />
-                    <span v-bind="props.label">{{ label }}</span>
+                <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
+                    <span :class="item.icon" />
+                    <span class="ml-2">{{ item.label }}</span>
                     <span v-if="hasSubmenu" class="pi pi-fw pi-angle-right" v-bind="props.submenuicon" />
                 </a>
             </template>
@@ -362,136 +171,45 @@ export default {
 
 <script setup>
 import { ref } from "vue";
+import { useRouter } from "vue";
+
+const router = useRouter();
 
 const items = ref([
     {
-        label: 'File',
-        icon: 'pi pi-fw pi-file',
+        label: 'Router',
+        icon: 'pi pi-palette',
         items: [
             {
-                label: 'New',
-                icon: 'pi pi-fw pi-plus',
-                items: [
-                    {
-                        label: 'Bookmark',
-                        icon: 'pi pi-fw pi-bookmark'
-                    },
-                    {
-                        label: 'Video',
-                        icon: 'pi pi-fw pi-video'
-                    }
-                ]
+                label: 'Styled',
+                route: '/theming'
             },
             {
-                label: 'Delete',
-                icon: 'pi pi-fw pi-trash'
-            },
-            {
-                separator: true
-            },
-            {
-                label: 'Export',
-                icon: 'pi pi-fw pi-external-link'
+                label: 'Unstyled',
+                route: '/unstyled'
             }
         ]
     },
     {
-        label: 'Edit',
-        icon: 'pi pi-fw pi-pencil',
+        label: 'Programmatic',
+        icon: 'pi pi-link',
+        command: () => {
+            router.push('/installation');
+        }
+    },
+    {
+        label: 'External',
+        icon: 'pi pi-home',
         items: [
             {
-                label: 'Left',
-                icon: 'pi pi-fw pi-align-left'
+                label: 'Vue.js',
+                url: 'https://vuejs.org/'
             },
             {
-                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: 'Vite.js',
+                url: 'https://vuejs.org/'
             }
         ]
-    },
-    {
-        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',
-                        items: [
-                            {
-                                label: 'Print',
-                                icon: 'pi pi-fw pi-print'
-                            }
-                        ]
-                    },
-                    {
-                        icon: 'pi pi-fw pi-bars',
-                        label: 'List'
-                    }
-                ]
-            }
-        ]
-    },
-    {
-        label: 'Events',
-        icon: 'pi pi-fw pi-calendar',
-        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: 'Archive',
-                icon: 'pi pi-fw pi-calendar-times',
-                items: [
-                    {
-                        label: 'Remove',
-                        icon: 'pi pi-fw pi-calendar-minus'
-                    }
-                ]
-            }
-        ]
-    },
-    {
-        label: 'Upload',
-        icon: 'pi pi-fw pi-upload',
-        route: '/fileupload'
-    },
-    {
-        separator: true
-    },
-    {
-        label: 'Quit',
-        icon: 'pi pi-fw pi-power-off'
     }
 ]);
 <\/script>
diff --git a/doc/tieredmenu/TemplateDoc.vue b/doc/tieredmenu/TemplateDoc.vue
new file mode 100644
index 000000000..9f1b4ab1d
--- /dev/null
+++ b/doc/tieredmenu/TemplateDoc.vue
@@ -0,0 +1,331 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Menu offers item customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter. When item templating is used, bind the <i>action</i> prop from the slot props to handle accessibility and pass
+            through attributes.
+        </p>
+    </DocSectionText>
+    <div class="card flex justify-content-center">
+        <TieredMenu :model="items">
+            <template #item="{ item, props, hasSubmenu }">
+                <a v-ripple class="flex align-items-center" v-bind="props.action">
+                    <span :class="item.icon" />
+                    <span class="ml-2">{{ 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>
+                    <i v-if="hasSubmenu" class="pi pi-angle-right ml-auto text-primary"></i>
+                </a>
+            </template>
+        </TieredMenu>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'File',
+                    icon: 'pi pi-file',
+                    items: [
+                        {
+                            label: 'New',
+                            icon: 'pi pi-plus',
+                            items: [
+                                {
+                                    label: 'Document',
+                                    icon: 'pi pi-file',
+                                    shortcut: '⌘+N'
+                                },
+                                {
+                                    label: 'Image',
+                                    icon: 'pi pi-image',
+                                    shortcut: '⌘+I'
+                                },
+                                {
+                                    label: 'Video',
+                                    icon: 'pi pi-video',
+                                    shortcut: '⌘+L'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Open',
+                            icon: 'pi pi-folder-open',
+                            shortcut: '⌘+O'
+                        },
+                        {
+                            label: 'Print',
+                            icon: 'pi pi-print',
+                            shortcut: '⌘+P'
+                        }
+                    ]
+                },
+                {
+                    label: 'Edit',
+                    icon: 'pi pi-file-edit',
+                    items: [
+                        {
+                            label: 'Copy',
+                            icon: 'pi pi-copy',
+                            shortcut: '⌘+C'
+                        },
+                        {
+                            label: 'Delete',
+                            icon: 'pi pi-times',
+                            shortcut: '⌘+D'
+                        }
+                    ]
+                },
+                {
+                    label: 'Search',
+                    icon: 'pi pi-search',
+                    shortcut: '⌘+S'
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Share',
+                    icon: 'pi pi-share-alt',
+                    items: [
+                        {
+                            label: 'Slack',
+                            icon: 'pi pi-slack',
+                            badge: 2
+                        },
+                        {
+                            label: 'Whatsapp',
+                            icon: 'pi pi-whatsapp',
+                            badge: 3
+                        }
+                    ]
+                }
+            ],
+            code: {
+                basic: `
+<TieredMenu :model="items">
+    <template #item="{ item, props, hasSubmenu }">
+        <a v-ripple class="flex align-items-center" v-bind="props.action">
+            <span :class="item.icon" />
+            <span class="ml-2">{{ 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>
+            <i v-if="hasSubmenu" class="pi pi-angle-right ml-auto text-primary"></i>
+        </a>
+    </template>
+</TieredMenu>
+`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <TieredMenu :model="items">
+            <template #item="{ item, props, hasSubmenu }">
+                <a v-ripple class="flex align-items-center" v-bind="props.action">
+                    <span :class="item.icon" />
+                    <span class="ml-2">{{ 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>
+                    <i v-if="hasSubmenu" class="pi pi-angle-right ml-auto text-primary"></i>
+                </a>
+            </template>
+        </TieredMenu>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'File',
+                    icon: 'pi pi-file',
+                    items: [
+                        {
+                            label: 'New',
+                            icon: 'pi pi-plus',
+                            items: [
+                                {
+                                    label: 'Document',
+                                    icon: 'pi pi-file',
+                                    shortcut: '⌘+N'
+                                },
+                                {
+                                    label: 'Image',
+                                    icon: 'pi pi-image',
+                                    shortcut: '⌘+I'
+                                },
+                                {
+                                    label: 'Video',
+                                    icon: 'pi pi-video',
+                                    shortcut: '⌘+L'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Open',
+                            icon: 'pi pi-folder-open',
+                            shortcut: '⌘+O'
+                        },
+                        {
+                            label: 'Print',
+                            icon: 'pi pi-print',
+                            shortcut: '⌘+P'
+                        }
+                    ]
+                },
+                {
+                    label: 'Edit',
+                    icon: 'pi pi-file-edit',
+                    items: [
+                        {
+                            label: 'Copy',
+                            icon: 'pi pi-copy',
+                            shortcut: '⌘+C'
+                        },
+                        {
+                            label: 'Delete',
+                            icon: 'pi pi-times',
+                            shortcut: '⌘+D'
+                        }
+                    ]
+                },
+                {
+                    label: 'Search',
+                    icon: 'pi pi-search',
+                    shortcut: '⌘+S'
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Share',
+                    icon: 'pi pi-share-alt',
+                    items: [
+                        {
+                            label: 'Slack',
+                            icon: 'pi pi-slack',
+                            badge: 2
+                        },
+                        {
+                            label: 'Whatsapp',
+                            icon: 'pi pi-whatsapp',
+                            badge: 3
+                        }
+                    ]
+                }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <TieredMenu :model="items">
+            <template #item="{ item, props, hasSubmenu }">
+                <a v-ripple class="flex align-items-center" v-bind="props.action">
+                    <span :class="item.icon" />
+                    <span class="ml-2">{{ 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>
+                    <i v-if="hasSubmenu" class="pi pi-angle-right ml-auto text-primary"></i>
+                </a>
+            </template>
+        </TieredMenu>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const items = ref([
+    {
+        label: 'File',
+        icon: 'pi pi-file',
+        items: [
+            {
+                label: 'New',
+                icon: 'pi pi-plus',
+                items: [
+                    {
+                        label: 'Document',
+                        icon: 'pi pi-file',
+                        shortcut: '⌘+N'
+                    },
+                    {
+                        label: 'Image',
+                        icon: 'pi pi-image',
+                        shortcut: '⌘+I'
+                    },
+                    {
+                        label: 'Video',
+                        icon: 'pi pi-video',
+                        shortcut: '⌘+L'
+                    }
+                ]
+            },
+            {
+                label: 'Open',
+                icon: 'pi pi-folder-open',
+                shortcut: '⌘+O'
+            },
+            {
+                label: 'Print',
+                icon: 'pi pi-print',
+                shortcut: '⌘+P'
+            }
+        ]
+    },
+    {
+        label: 'Edit',
+        icon: 'pi pi-file-edit',
+        items: [
+            {
+                label: 'Copy',
+                icon: 'pi pi-copy',
+                shortcut: '⌘+C'
+            },
+            {
+                label: 'Delete',
+                icon: 'pi pi-times',
+                shortcut: '⌘+D'
+            }
+        ]
+    },
+    {
+        label: 'Search',
+        icon: 'pi pi-search',
+        shortcut: '⌘+S'
+    },
+    {
+        separator: true
+    },
+    {
+        label: 'Share',
+        icon: 'pi pi-share-alt',
+        items: [
+            {
+                label: 'Slack',
+                icon: 'pi pi-slack',
+                badge: 2
+            },
+            {
+                label: 'Whatsapp',
+                icon: 'pi pi-whatsapp',
+                badge: 3
+            }
+        ]
+    }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/pages/tieredmenu/index.vue b/pages/tieredmenu/index.vue
index 1260e69c9..4a1aefbf7 100755
--- a/pages/tieredmenu/index.vue
+++ b/pages/tieredmenu/index.vue
@@ -13,9 +13,11 @@
 <script>
 import AccessibilityDoc from '@/doc/tieredmenu/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/tieredmenu/BasicDoc.vue';
+import CommandDoc from '@/doc/tieredmenu/CommandDoc.vue';
 import ImportDoc from '@/doc/tieredmenu/ImportDoc.vue';
 import PopupDoc from '@/doc/tieredmenu/PopupDoc.vue';
 import RouterDoc from '@/doc/tieredmenu/RouterDoc.vue';
+import TemplateDoc from '@/doc/tieredmenu/TemplateDoc.vue';
 import PTComponent from '@/doc/tieredmenu/pt/index.vue';
 import ThemingDoc from '@/doc/tieredmenu/theming/index.vue';
 
@@ -38,6 +40,16 @@ export default {
                     label: 'Popup',
                     component: PopupDoc
                 },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
+                {
+                    id: 'command',
+                    label: 'Command',
+                    component: CommandDoc
+                },
                 {
                     id: 'router',
                     label: 'Router',