diff --git a/components/lib/megamenu/style/MegaMenuStyle.js b/components/lib/megamenu/style/MegaMenuStyle.js
index 0309512df..9e6353c14 100644
--- a/components/lib/megamenu/style/MegaMenuStyle.js
+++ b/components/lib/megamenu/style/MegaMenuStyle.js
@@ -4,6 +4,7 @@ const css = `
 @layer primevue {
     .p-megamenu {
         display: flex;
+        position: relative;
     }
 
     .p-megamenu-root-list {
@@ -12,10 +13,6 @@ const css = `
         list-style: none;
     }
 
-    .p-megamenu-root-list > .p-menuitem {
-        position: relative;
-    }
-
     .p-megamenu .p-menuitem-link {
         cursor: pointer;
         display: flex;
@@ -34,6 +31,8 @@ const css = `
         position: absolute;
         width: auto;
         z-index: 1;
+        left: 0;
+        min-width: 100%;
     }
 
     .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel {
diff --git a/doc/megamenu/BasicDoc.vue b/doc/megamenu/BasicDoc.vue
index 09057c042..1049c0677 100644
--- a/doc/megamenu/BasicDoc.vue
+++ b/doc/megamenu/BasicDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>MegaMenu requires a collection of menuitems as its <i>model</i>.</p>
     </DocSectionText>
-    <div class="card">
+    <div class="card lg:px-8">
         <MegaMenu :model="items" />
     </div>
     <DocSectionCode :code="code" />
@@ -14,115 +14,95 @@ export default {
         return {
             items: [
                 {
-                    label: 'Videos',
-                    icon: 'pi pi-fw pi-video',
+                    label: 'Furniture',
+                    icon: 'pi pi-box',
                     items: [
                         [
                             {
-                                label: 'Video 1',
-                                items: [{ label: 'Video 1.1' }, { label: 'Video 1.2' }]
-                            },
-                            {
-                                label: 'Video 2',
-                                items: [{ label: 'Video 2.1' }, { label: 'Video 2.2' }]
+                                label: 'Living Room',
+                                items: [{ label: 'Accessories' }, { label: 'Armchair' }, { label: 'Coffee Table' }, { label: 'Couch' }, { label: 'TV Stand' }]
                             }
                         ],
                         [
                             {
-                                label: 'Video 3',
-                                items: [{ label: 'Video 3.1' }, { label: 'Video 3.2' }]
+                                label: 'Kitchen',
+                                items: [{ label: 'Bar stool' }, { label: 'Chair' }, { label: 'Table' }]
                             },
                             {
-                                label: 'Video 4',
-                                items: [{ label: 'Video 4.1' }, { label: 'Video 4.2' }]
+                                label: 'Bathroom',
+                                items: [{ label: 'Accessories' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Bedroom',
+                                items: [{ label: 'Bed' }, { label: 'Chaise lounge' }, { label: 'Cupboard' }, { label: 'Dresser' }, { label: 'Wardrobe' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Office',
+                                items: [{ label: 'Bookcase' }, { label: 'Cabinet' }, { label: 'Chair' }, { label: 'Desk' }, { label: 'Executive Chair' }]
                             }
                         ]
                     ]
                 },
                 {
-                    label: 'Users',
-                    icon: 'pi pi-fw pi-users',
+                    label: 'Electronics',
+                    icon: 'pi pi-mobile',
                     items: [
                         [
                             {
-                                label: 'User 1',
-                                items: [{ label: 'User 1.1' }, { label: 'User 1.2' }]
-                            },
-                            {
-                                label: 'User 2',
-                                items: [{ label: 'User 2.1' }, { label: 'User 2.2' }]
+                                label: 'Computer',
+                                items: [{ label: 'Monitor' }, { label: 'Mouse' }, { label: 'Notebook' }, { label: 'Keyboard' }, { label: 'Printer' }, { label: 'Storage' }]
                             }
                         ],
                         [
                             {
-                                label: 'User 3',
-                                items: [{ label: 'User 3.1' }, { label: 'User 3.2' }]
-                            },
-                            {
-                                label: 'User 4',
-                                items: [{ label: 'User 4.1' }, { label: 'User 4.2' }]
+                                label: 'Home Theather',
+                                items: [{ label: 'Projector' }, { label: 'Speakers' }, { label: 'TVs' }]
                             }
                         ],
                         [
                             {
-                                label: 'User 5',
-                                items: [{ label: 'User 5.1' }, { label: 'User 5.2' }]
-                            },
+                                label: 'Gaming',
+                                items: [{ label: 'Accessories' }, { label: 'Console' }, { label: 'PC' }, { label: 'Video Games' }]
+                            }
+                        ],
+                        [
                             {
-                                label: 'User 6',
-                                items: [{ label: 'User 6.1' }, { label: 'User 6.2' }]
+                                label: 'Appliances',
+                                items: [{ label: 'Coffee Machine' }, { label: 'Fridge' }, { label: 'Oven' }, { label: 'Vaccum Cleaner' }, { label: 'Washing Machine' }]
                             }
                         ]
                     ]
                 },
                 {
-                    label: 'Events',
-                    icon: 'pi pi-fw pi-calendar',
+                    label: 'Sports',
+                    icon: 'pi pi-clock',
                     items: [
                         [
                             {
-                                label: 'Event 1',
-                                items: [{ label: 'Event 1.1' }, { label: 'Event 1.2' }]
-                            },
-                            {
-                                label: 'Event 2',
-                                items: [{ label: 'Event 2.1' }, { label: 'Event 2.2' }]
+                                label: 'Football',
+                                items: [{ label: 'Kits' }, { label: 'Shoes' }, { label: 'Shorts' }, { label: 'Training' }]
                             }
                         ],
                         [
                             {
-                                label: 'Event 3',
-                                items: [{ label: 'Event 3.1' }, { label: 'Event 3.2' }]
-                            },
-                            {
-                                label: 'Event 4',
-                                items: [{ label: 'Event 4.1' }, { label: 'Event 4.2' }]
-                            }
-                        ]
-                    ]
-                },
-                {
-                    label: 'Settings',
-                    icon: 'pi pi-fw pi-cog',
-                    items: [
-                        [
-                            {
-                                label: 'Setting 1',
-                                items: [{ label: 'Setting 1.1' }, { label: 'Setting 1.2' }]
-                            },
-                            {
-                                label: 'Setting 2',
-                                items: [{ label: 'Setting 2.1' }, { label: 'Setting 2.2' }]
-                            },
-                            {
-                                label: 'Setting 3',
-                                items: [{ label: 'Setting 3.1' }, { label: 'Setting 3.2' }]
+                                label: 'Running',
+                                items: [{ label: 'Accessories' }, { label: 'Shoes' }, { label: 'T-Shirts' }, { label: 'Shorts' }]
                             }
                         ],
                         [
                             {
-                                label: 'Technology 4',
-                                items: [{ label: 'Setting 4.1' }, { label: 'Setting 4.2' }]
+                                label: 'Swimming',
+                                items: [{ label: 'Kickboard' }, { label: 'Nose Clip' }, { label: 'Swimsuits' }, { label: 'Paddles' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Tennis',
+                                items: [{ label: 'Balls' }, { label: 'Rackets' }, { label: 'Shoes' }, { label: 'Training' }]
                             }
                         ]
                     ]
@@ -145,115 +125,95 @@ export default {
         return {
             items: [
                 {
-                    label: 'Videos',
-                    icon: 'pi pi-fw pi-video',
+                    label: 'Furniture',
+                    icon: 'pi pi-box',
                     items: [
                         [
                             {
-                                label: 'Video 1',
-                                items: [{ label: 'Video 1.1' }, { label: 'Video 1.2' }]
-                            },
-                            {
-                                label: 'Video 2',
-                                items: [{ label: 'Video 2.1' }, { label: 'Video 2.2' }]
+                                label: 'Living Room',
+                                items: [{ label: 'Accessories' }, { label: 'Armchair' }, { label: 'Coffee Table' }, { label: 'Couch' }, { label: 'TV Stand' }]
                             }
                         ],
                         [
                             {
-                                label: 'Video 3',
-                                items: [{ label: 'Video 3.1' }, { label: 'Video 3.2' }]
+                                label: 'Kitchen',
+                                items: [{ label: 'Bar stool' }, { label: 'Chair' }, { label: 'Table' }]
                             },
                             {
-                                label: 'Video 4',
-                                items: [{ label: 'Video 4.1' }, { label: 'Video 4.2' }]
+                                label: 'Bathroom',
+                                items: [{ label: 'Accessories' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Bedroom',
+                                items: [{ label: 'Bed' }, { label: 'Chaise lounge' }, { label: 'Cupboard' }, { label: 'Dresser' }, { label: 'Wardrobe' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Office',
+                                items: [{ label: 'Bookcase' }, { label: 'Cabinet' }, { label: 'Chair' }, { label: 'Desk' }, { label: 'Executive Chair' }]
                             }
                         ]
                     ]
                 },
                 {
-                    label: 'Users',
-                    icon: 'pi pi-fw pi-users',
+                    label: 'Electronics',
+                    icon: 'pi pi-mobile',
                     items: [
                         [
                             {
-                                label: 'User 1',
-                                items: [{ label: 'User 1.1' }, { label: 'User 1.2' }]
-                            },
-                            {
-                                label: 'User 2',
-                                items: [{ label: 'User 2.1' }, { label: 'User 2.2' }]
+                                label: 'Computer',
+                                items: [{ label: 'Monitor' }, { label: 'Mouse' }, { label: 'Notebook' }, { label: 'Keyboard' }, { label: 'Printer' }, { label: 'Storage' }]
                             }
                         ],
                         [
                             {
-                                label: 'User 3',
-                                items: [{ label: 'User 3.1' }, { label: 'User 3.2' }]
-                            },
-                            {
-                                label: 'User 4',
-                                items: [{ label: 'User 4.1' }, { label: 'User 4.2' }]
+                                label: 'Home Theather',
+                                items: [{ label: 'Projector' }, { label: 'Speakers' }, { label: 'TVs' }]
                             }
                         ],
                         [
                             {
-                                label: 'User 5',
-                                items: [{ label: 'User 5.1' }, { label: 'User 5.2' }]
-                            },
+                                label: 'Gaming',
+                                items: [{ label: 'Accessories' }, { label: 'Console' }, { label: 'PC' }, { label: 'Video Games' }]
+                            }
+                        ],
+                        [
                             {
-                                label: 'User 6',
-                                items: [{ label: 'User 6.1' }, { label: 'User 6.2' }]
+                                label: 'Appliances',
+                                items: [{ label: 'Coffee Machine' }, { label: 'Fridge' }, { label: 'Oven' }, { label: 'Vaccum Cleaner' }, { label: 'Washing Machine' }]
                             }
                         ]
                     ]
                 },
                 {
-                    label: 'Events',
-                    icon: 'pi pi-fw pi-calendar',
+                    label: 'Sports',
+                    icon: 'pi pi-clock',
                     items: [
                         [
                             {
-                                label: 'Event 1',
-                                items: [{ label: 'Event 1.1' }, { label: 'Event 1.2' }]
-                            },
-                            {
-                                label: 'Event 2',
-                                items: [{ label: 'Event 2.1' }, { label: 'Event 2.2' }]
+                                label: 'Football',
+                                items: [{ label: 'Kits' }, { label: 'Shoes' }, { label: 'Shorts' }, { label: 'Training' }]
                             }
                         ],
                         [
                             {
-                                label: 'Event 3',
-                                items: [{ label: 'Event 3.1' }, { label: 'Event 3.2' }]
-                            },
-                            {
-                                label: 'Event 4',
-                                items: [{ label: 'Event 4.1' }, { label: 'Event 4.2' }]
-                            }
-                        ]
-                    ]
-                },
-                {
-                    label: 'Settings',
-                    icon: 'pi pi-fw pi-cog',
-                    items: [
-                        [
-                            {
-                                label: 'Setting 1',
-                                items: [{ label: 'Setting 1.1' }, { label: 'Setting 1.2' }]
-                            },
-                            {
-                                label: 'Setting 2',
-                                items: [{ label: 'Setting 2.1' }, { label: 'Setting 2.2' }]
-                            },
-                            {
-                                label: 'Setting 3',
-                                items: [{ label: 'Setting 3.1' }, { label: 'Setting 3.2' }]
+                                label: 'Running',
+                                items: [{ label: 'Accessories' }, { label: 'Shoes' }, { label: 'T-Shirts' }, { label: 'Shorts' }]
                             }
                         ],
                         [
                             {
-                                label: 'Technology 4',
-                                items: [{ label: 'Setting 4.1' }, { label: 'Setting 4.2' }]
+                                label: 'Swimming',
+                                items: [{ label: 'Kickboard' }, { label: 'Nose Clip' }, { label: 'Swimsuits' }, { label: 'Paddles' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Tennis',
+                                items: [{ label: 'Balls' }, { label: 'Rackets' }, { label: 'Shoes' }, { label: 'Training' }]
                             }
                         ]
                     ]
@@ -276,115 +236,95 @@ import { ref } from "vue";
 
 const items = ref([
     {
-        label: 'Videos',
-        icon: 'pi pi-fw pi-video',
+        label: 'Furniture',
+        icon: 'pi pi-box',
         items: [
             [
                 {
-                    label: 'Video 1',
-                    items: [{ label: 'Video 1.1' }, { label: 'Video 1.2' }]
-                },
-                {
-                    label: 'Video 2',
-                    items: [{ label: 'Video 2.1' }, { label: 'Video 2.2' }]
+                    label: 'Living Room',
+                    items: [{ label: 'Accessories' }, { label: 'Armchair' }, { label: 'Coffee Table' }, { label: 'Couch' }, { label: 'TV Stand' }]
                 }
             ],
             [
                 {
-                    label: 'Video 3',
-                    items: [{ label: 'Video 3.1' }, { label: 'Video 3.2' }]
+                    label: 'Kitchen',
+                    items: [{ label: 'Bar stool' }, { label: 'Chair' }, { label: 'Table' }]
                 },
                 {
-                    label: 'Video 4',
-                    items: [{ label: 'Video 4.1' }, { label: 'Video 4.2' }]
+                    label: 'Bathroom',
+                    items: [{ label: 'Accessories' }]
+                }
+            ],
+            [
+                {
+                    label: 'Bedroom',
+                    items: [{ label: 'Bed' }, { label: 'Chaise lounge' }, { label: 'Cupboard' }, { label: 'Dresser' }, { label: 'Wardrobe' }]
+                }
+            ],
+            [
+                {
+                    label: 'Office',
+                    items: [{ label: 'Bookcase' }, { label: 'Cabinet' }, { label: 'Chair' }, { label: 'Desk' }, { label: 'Executive Chair' }]
                 }
             ]
         ]
     },
     {
-        label: 'Users',
-        icon: 'pi pi-fw pi-users',
+        label: 'Electronics',
+        icon: 'pi pi-mobile',
         items: [
             [
                 {
-                    label: 'User 1',
-                    items: [{ label: 'User 1.1' }, { label: 'User 1.2' }]
-                },
-                {
-                    label: 'User 2',
-                    items: [{ label: 'User 2.1' }, { label: 'User 2.2' }]
+                    label: 'Computer',
+                    items: [{ label: 'Monitor' }, { label: 'Mouse' }, { label: 'Notebook' }, { label: 'Keyboard' }, { label: 'Printer' }, { label: 'Storage' }]
                 }
             ],
             [
                 {
-                    label: 'User 3',
-                    items: [{ label: 'User 3.1' }, { label: 'User 3.2' }]
-                },
-                {
-                    label: 'User 4',
-                    items: [{ label: 'User 4.1' }, { label: 'User 4.2' }]
+                    label: 'Home Theather',
+                    items: [{ label: 'Projector' }, { label: 'Speakers' }, { label: 'TVs' }]
                 }
             ],
             [
                 {
-                    label: 'User 5',
-                    items: [{ label: 'User 5.1' }, { label: 'User 5.2' }]
-                },
+                    label: 'Gaming',
+                    items: [{ label: 'Accessories' }, { label: 'Console' }, { label: 'PC' }, { label: 'Video Games' }]
+                }
+            ],
+            [
                 {
-                    label: 'User 6',
-                    items: [{ label: 'User 6.1' }, { label: 'User 6.2' }]
+                    label: 'Appliances',
+                    items: [{ label: 'Coffee Machine' }, { label: 'Fridge' }, { label: 'Oven' }, { label: 'Vaccum Cleaner' }, { label: 'Washing Machine' }]
                 }
             ]
         ]
     },
     {
-        label: 'Events',
-        icon: 'pi pi-fw pi-calendar',
+        label: 'Sports',
+        icon: 'pi pi-clock',
         items: [
             [
                 {
-                    label: 'Event 1',
-                    items: [{ label: 'Event 1.1' }, { label: 'Event 1.2' }]
-                },
-                {
-                    label: 'Event 2',
-                    items: [{ label: 'Event 2.1' }, { label: 'Event 2.2' }]
+                    label: 'Football',
+                    items: [{ label: 'Kits' }, { label: 'Shoes' }, { label: 'Shorts' }, { label: 'Training' }]
                 }
             ],
             [
                 {
-                    label: 'Event 3',
-                    items: [{ label: 'Event 3.1' }, { label: 'Event 3.2' }]
-                },
-                {
-                    label: 'Event 4',
-                    items: [{ label: 'Event 4.1' }, { label: 'Event 4.2' }]
-                }
-            ]
-        ]
-    },
-    {
-        label: 'Settings',
-        icon: 'pi pi-fw pi-cog',
-        items: [
-            [
-                {
-                    label: 'Setting 1',
-                    items: [{ label: 'Setting 1.1' }, { label: 'Setting 1.2' }]
-                },
-                {
-                    label: 'Setting 2',
-                    items: [{ label: 'Setting 2.1' }, { label: 'Setting 2.2' }]
-                },
-                {
-                    label: 'Setting 3',
-                    items: [{ label: 'Setting 3.1' }, { label: 'Setting 3.2' }]
+                    label: 'Running',
+                    items: [{ label: 'Accessories' }, { label: 'Shoes' }, { label: 'T-Shirts' }, { label: 'Shorts' }]
                 }
             ],
             [
                 {
-                    label: 'Technology 4',
-                    items: [{ label: 'Setting 4.1' }, { label: 'Setting 4.2' }]
+                    label: 'Swimming',
+                    items: [{ label: 'Kickboard' }, { label: 'Nose Clip' }, { label: 'Swimsuits' }, { label: 'Paddles' }]
+                }
+            ],
+            [
+                {
+                    label: 'Tennis',
+                    items: [{ label: 'Balls' }, { label: 'Rackets' }, { label: 'Shoes' }, { label: 'Training' }]
                 }
             ]
         ]
diff --git a/doc/megamenu/CommandDoc.vue b/doc/megamenu/CommandDoc.vue
new file mode 100644
index 000000000..9d30ee141
--- /dev/null
+++ b/doc/megamenu/CommandDoc.vue
@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>The <i>command</i> property of a menuitem defines the callback to run when an item is activated by click or a key event.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" importCode hideToggleCode hideStackBlitz hideCodeSandbox />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+{
+    label: 'Log out',
+    icon: 'pi pi-signout',
+    command: () => {
+        // Callback to run
+    }
+}
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/megamenu/RouterDoc.vue b/doc/megamenu/RouterDoc.vue
index 204843ce6..8fdc9c94b 100644
--- a/doc/megamenu/RouterDoc.vue
+++ b/doc/megamenu/RouterDoc.vue
@@ -1,169 +1,27 @@
 <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">
-        <MegaMenu :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="routerProps.navigate">
-                        <span v-bind="props.icon" />
-                        <span v-bind="props.label">{{ label }}</span>
-                    </a>
-                </router-link>
-                <a v-else :href="item.url" :target="item.target" v-bind="props.action">
-                    <span v-bind="props.icon" />
-                    <span v-bind="props.label">{{ label }}</span>
-                    <span :class="[hasSubmenu && 'pi pi-fw pi-angle-down']" v-bind="props.submenuicon" />
-                </a>
-            </template>
-        </MegaMenu>
-    </div>
-    <DocSectionCode :code="code" />
+    <DocSectionCode :code="code" hideToggleCode hideStackBlitz hideCodeSandbox />
 </template>
 
 <script>
 export default {
     data() {
         return {
-            items: [
-                {
-                    label: 'Videos',
-                    icon: 'pi pi-fw pi-video',
-                    items: [
-                        [
-                            {
-                                label: 'Video 1',
-                                items: [{ label: 'Video 1.1' }, { label: 'Video 1.2' }]
-                            },
-                            {
-                                label: 'Video 2',
-                                items: [{ label: 'Video 2.1' }, { label: 'Video 2.2' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Video 3',
-                                items: [{ label: 'Video 3.1' }, { label: 'Video 3.2' }]
-                            },
-                            {
-                                label: 'Video 4',
-                                items: [{ label: 'Video 4.1' }, { label: 'Video 4.2' }]
-                            }
-                        ]
-                    ]
-                },
-                {
-                    label: 'Users',
-                    icon: 'pi pi-fw pi-users',
-                    items: [
-                        [
-                            {
-                                label: 'User 1',
-                                items: [{ label: 'User 1.1' }, { label: 'User 1.2' }]
-                            },
-                            {
-                                label: 'User 2',
-                                items: [{ label: 'User 2.1' }, { label: 'User 2.2' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'User 3',
-                                items: [{ label: 'User 3.1' }, { label: 'User 3.2' }]
-                            },
-                            {
-                                label: 'User 4',
-                                items: [{ label: 'User 4.1' }, { label: 'User 4.2' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'User 5',
-                                items: [{ label: 'User 5.1' }, { label: 'User 5.2' }]
-                            },
-                            {
-                                label: 'User 6',
-                                items: [{ label: 'User 6.1' }, { label: 'User 6.2' }]
-                            }
-                        ]
-                    ]
-                },
-                {
-                    label: 'Events',
-                    icon: 'pi pi-fw pi-calendar',
-                    items: [
-                        [
-                            {
-                                label: 'Event 1',
-                                items: [{ label: 'Event 1.1' }, { label: 'Event 1.2' }]
-                            },
-                            {
-                                label: 'Event 2',
-                                items: [{ label: 'Event 2.1' }, { label: 'Event 2.2' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Event 3',
-                                items: [{ label: 'Event 3.1' }, { label: 'Event 3.2' }]
-                            },
-                            {
-                                label: 'Event 4',
-                                items: [{ label: 'Event 4.1' }, { label: 'Event 4.2' }]
-                            }
-                        ]
-                    ]
-                },
-                {
-                    label: 'Settings',
-                    icon: 'pi pi-fw pi-cog',
-                    items: [
-                        [
-                            {
-                                label: 'Setting 1',
-                                items: [{ label: 'Setting 1.1' }, { label: 'Setting 1.2' }]
-                            },
-                            {
-                                label: 'Setting 2',
-                                items: [{ label: 'Setting 2.1' }, { label: 'Setting 2.2' }]
-                            },
-                            {
-                                label: 'Setting 3',
-                                items: [{ label: 'Setting 3.1' }, { label: 'Setting 3.2' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Technology 4',
-                                items: [{ label: 'Setting 4.1' }, { label: 'Setting 4.2' }]
-                            }
-                        ]
-                    ]
-                },
-                {
-                    label: 'Upload',
-                    icon: 'pi pi-fw pi-upload',
-                    route: '/fileupload'
-                }
-            ],
             code: {
                 basic: `
 <MegaMenu :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="routerProps.navigate">
-                <span v-bind="props.icon" />
-                <span v-bind="props.label">{{ label }}</span>
+    <template #item="{ item }">
+        <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
+            <a v-ripple :href="href" @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>
-            <span :class="[hasSubmenu && 'pi pi-fw pi-angle-down']" v-bind="props.submenuicon" />
+        <a v-else v-ripple :href="item.url" :target="item.target">
+            <span :class="item.icon" />
+            <span class="ml-2">{{ item.label }}</span>
         </a>
     </template>
 </MegaMenu>
@@ -172,17 +30,16 @@ export default {
 <template>
     <div class="card">
         <MegaMenu :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="routerProps.navigate">
-                        <span v-bind="props.icon" />
-                        <span v-bind="props.label">{{ label }}</span>
+            <template #item="{ item }">
+                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
+                    <a v-ripple :href="href" @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>
-                    <span :class="[hasSubmenu && 'pi pi-fw pi-angle-down']" v-bind="props.submenuicon" />
+                <a v-else v-ripple :href="item.url" :target="item.target">
+                    <span :class="item.icon" />
+                    <span class="ml-2">{{ item.label }}</span>
                 </a>
             </template>
         </MegaMenu>
@@ -195,123 +52,47 @@ export default {
         return {
             items: [
                 {
-                    label: 'Videos',
-                    icon: 'pi pi-fw pi-video',
+                    label: 'Navigation',
+                    icon: 'pi pi-link',
                     items: [
                         [
                             {
-                                label: 'Video 1',
-                                items: [{ label: 'Video 1.1' }, { label: 'Video 1.2' }]
-                            },
-                            {
-                                label: 'Video 2',
-                                items: [{ label: 'Video 2.1' }, { label: 'Video 2.2' }]
+                                label: 'Router',
+                                items: [
+                                    { label: 'Theming', route: '/theming' },
+                                    { label: 'Unstyled', route: '/unstyled' }
+                                ]
                             }
                         ],
                         [
                             {
-                                label: 'Video 3',
-                                items: [{ label: 'Video 3.1' }, { label: 'Video 3.2' }]
-                            },
+                                label: 'Programmatic',
+                                items: [
+                                    {
+                                        label: 'Installation',
+                                        command: () => {
+                                            this.$router.push('/installation');
+                                        }
+                                    }
+                                ]
+                            }
+                        ],
+                        [
                             {
-                                label: 'Video 4',
-                                items: [{ label: 'Video 4.1' }, { label: 'Video 4.2' }]
+                                label: 'External',
+                                items: [
+                                    {
+                                        label: 'Vue.js',
+                                        url: 'https://vuejs.org/'
+                                    },
+                                    {
+                                        label: 'Vite.js',
+                                        url: 'https://vuejs.org/'
+                                    }
+                                ]
                             }
                         ]
                     ]
-                },
-                {
-                    label: 'Users',
-                    icon: 'pi pi-fw pi-users',
-                    items: [
-                        [
-                            {
-                                label: 'User 1',
-                                items: [{ label: 'User 1.1' }, { label: 'User 1.2' }]
-                            },
-                            {
-                                label: 'User 2',
-                                items: [{ label: 'User 2.1' }, { label: 'User 2.2' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'User 3',
-                                items: [{ label: 'User 3.1' }, { label: 'User 3.2' }]
-                            },
-                            {
-                                label: 'User 4',
-                                items: [{ label: 'User 4.1' }, { label: 'User 4.2' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'User 5',
-                                items: [{ label: 'User 5.1' }, { label: 'User 5.2' }]
-                            },
-                            {
-                                label: 'User 6',
-                                items: [{ label: 'User 6.1' }, { label: 'User 6.2' }]
-                            }
-                        ]
-                    ]
-                },
-                {
-                    label: 'Events',
-                    icon: 'pi pi-fw pi-calendar',
-                    items: [
-                        [
-                            {
-                                label: 'Event 1',
-                                items: [{ label: 'Event 1.1' }, { label: 'Event 1.2' }]
-                            },
-                            {
-                                label: 'Event 2',
-                                items: [{ label: 'Event 2.1' }, { label: 'Event 2.2' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Event 3',
-                                items: [{ label: 'Event 3.1' }, { label: 'Event 3.2' }]
-                            },
-                            {
-                                label: 'Event 4',
-                                items: [{ label: 'Event 4.1' }, { label: 'Event 4.2' }]
-                            }
-                        ]
-                    ]
-                },
-                {
-                    label: 'Settings',
-                    icon: 'pi pi-fw pi-cog',
-                    items: [
-                        [
-                            {
-                                label: 'Setting 1',
-                                items: [{ label: 'Setting 1.1' }, { label: 'Setting 1.2' }]
-                            },
-                            {
-                                label: 'Setting 2',
-                                items: [{ label: 'Setting 2.1' }, { label: 'Setting 2.2' }]
-                            },
-                            {
-                                label: 'Setting 3',
-                                items: [{ label: 'Setting 3.1' }, { label: 'Setting 3.2' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Technology 4',
-                                items: [{ label: 'Setting 4.1' }, { label: 'Setting 4.2' }]
-                            }
-                        ]
-                    ]
-                },
-                {
-                    label: 'Upload',
-                    icon: 'pi pi-fw pi-upload',
-                    route: '/fileupload'
                 }
             ]
         };
@@ -323,17 +104,16 @@ export default {
 <template>
     <div class="card">
         <MegaMenu :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="routerProps.navigate">
-                        <span v-bind="props.icon" />
-                        <span v-bind="props.label">{{ label }}</span>
+            <template #item="{ item }">
+                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
+                    <a v-ripple :href="href" @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>
-                    <span :class="[hasSubmenu && 'pi pi-fw pi-angle-down']" v-bind="props.submenuicon" />
+                <a v-else v-ripple :href="item.url" :target="item.target">
+                    <span :class="item.icon" />
+                    <span class="ml-2">{{ item.label }}</span>
                 </a>
             </template>
         </MegaMenu>
@@ -342,126 +122,53 @@ export default {
 
 <script setup>
 import { ref } from "vue";
+import { useRouter } from "vue";
+
+const router = useRouter();
 
 const items = ref([
     {
-        label: 'Videos',
-        icon: 'pi pi-fw pi-video',
+        label: 'Navigation',
+        icon: 'pi pi-link',
         items: [
             [
                 {
-                    label: 'Video 1',
-                    items: [{ label: 'Video 1.1' }, { label: 'Video 1.2' }]
-                },
-                {
-                    label: 'Video 2',
-                    items: [{ label: 'Video 2.1' }, { label: 'Video 2.2' }]
+                    label: 'Router',
+                    items: [
+                        { label: 'Theming', route: '/theming' },
+                        { label: 'Unstyled', route: '/unstyled' }
+                    ]
                 }
             ],
             [
                 {
-                    label: 'Video 3',
-                    items: [{ label: 'Video 3.1' }, { label: 'Video 3.2' }]
-                },
+                    label: 'Programmatic',
+                    items: [
+                        {
+                            label: 'Installation',
+                            command: () => {
+                                $router.push('/installation');
+                            }
+                        }
+                    ]
+                }
+            ],
+            [
                 {
-                    label: 'Video 4',
-                    items: [{ label: 'Video 4.1' }, { label: 'Video 4.2' }]
+                    label: 'External',
+                    items: [
+                        {
+                            label: 'Vue.js',
+                            url: 'https://vuejs.org/'
+                        },
+                        {
+                            label: 'Vite.js',
+                            url: 'https://vuejs.org/'
+                        }
+                    ]
                 }
             ]
         ]
-    },
-    {
-        label: 'Users',
-        icon: 'pi pi-fw pi-users',
-        items: [
-            [
-                {
-                    label: 'User 1',
-                    items: [{ label: 'User 1.1' }, { label: 'User 1.2' }]
-                },
-                {
-                    label: 'User 2',
-                    items: [{ label: 'User 2.1' }, { label: 'User 2.2' }]
-                }
-            ],
-            [
-                {
-                    label: 'User 3',
-                    items: [{ label: 'User 3.1' }, { label: 'User 3.2' }]
-                },
-                {
-                    label: 'User 4',
-                    items: [{ label: 'User 4.1' }, { label: 'User 4.2' }]
-                }
-            ],
-            [
-                {
-                    label: 'User 5',
-                    items: [{ label: 'User 5.1' }, { label: 'User 5.2' }]
-                },
-                {
-                    label: 'User 6',
-                    items: [{ label: 'User 6.1' }, { label: 'User 6.2' }]
-                }
-            ]
-        ]
-    },
-    {
-        label: 'Events',
-        icon: 'pi pi-fw pi-calendar',
-        items: [
-            [
-                {
-                    label: 'Event 1',
-                    items: [{ label: 'Event 1.1' }, { label: 'Event 1.2' }]
-                },
-                {
-                    label: 'Event 2',
-                    items: [{ label: 'Event 2.1' }, { label: 'Event 2.2' }]
-                }
-            ],
-            [
-                {
-                    label: 'Event 3',
-                    items: [{ label: 'Event 3.1' }, { label: 'Event 3.2' }]
-                },
-                {
-                    label: 'Event 4',
-                    items: [{ label: 'Event 4.1' }, { label: 'Event 4.2' }]
-                }
-            ]
-        ]
-    },
-    {
-        label: 'Settings',
-        icon: 'pi pi-fw pi-cog',
-        items: [
-            [
-                {
-                    label: 'Setting 1',
-                    items: [{ label: 'Setting 1.1' }, { label: 'Setting 1.2' }]
-                },
-                {
-                    label: 'Setting 2',
-                    items: [{ label: 'Setting 2.1' }, { label: 'Setting 2.2' }]
-                },
-                {
-                    label: 'Setting 3',
-                    items: [{ label: 'Setting 3.1' }, { label: 'Setting 3.2' }]
-                }
-            ],
-            [
-                {
-                    label: 'Technology 4',
-                    items: [{ label: 'Setting 4.1' }, { label: 'Setting 4.2' }]
-                }
-            ]
-        ]
-    },
-    {
-        label: 'Upload',
-        icon: 'pi pi-fw pi-upload',
-        route: '/fileupload'
     }
 ]);
 <\/script>
diff --git a/doc/megamenu/TemplateDoc.vue b/doc/megamenu/TemplateDoc.vue
index 32e75b4cc..9e5670121 100644
--- a/doc/megamenu/TemplateDoc.vue
+++ b/doc/megamenu/TemplateDoc.vue
@@ -1,29 +1,45 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Custom content can be placed inside the megamenu using the <i>start</i> and <i>end</i> properties.</p>
+        <p>
+            Menubar offers item customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter. Additional slots named <i>start</i> and <i>end</i> are provided to embed content before or after the menu.
+        </p>
     </DocSectionText>
     <div class="card">
-        <MegaMenu :model="items" orientation="horizontal">
+        <MegaMenu :model="items" class="p-3 surface-0 shadow-2" style="border-radius: 3rem">
             <template #start>
-                <span class="flex align-items-center">
-                    <img alt="logo" src="https://primefaces.org/cdn/primevue/images/primevue-logo-dark.svg" height="24" class="mr-2" />
-                </span>
+                <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-2rem">
+                    <path
+                        d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
+                        fill="var(--primary-color)"
+                    />
+                    <path
+                        d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
+                        fill="var(--text-color)"
+                    />
+                </svg>
             </template>
-            <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">
-                        <span v-bind="props.icon" />
-                        <span v-bind="props.label">{{ label }}</span>
-                    </a>
-                </router-link>
-                <a v-else :href="item.url" :target="item.target" v-bind="props.action">
-                    <span v-bind="props.icon" />
-                    <span v-bind="props.label">{{ label }}</span>
-                    <span :class="[hasSubmenu && 'pi pi-fw pi-angle-down']" v-bind="props.submenuicon" />
+            <template #item="{ item }">
+                <a v-if="item.root" v-ripple class="flex align-items-center cursor-pointer px-3 py-2 overflow-hidden relative font-semibold text-lg uppercase" style="border-radius: 2rem">
+                    <span :class="item.icon" />
+                    <span class="ml-2">{{ item.label }}</span>
                 </a>
+                <a v-else-if="!item.image" class="flex align-items-center p-3 cursor-pointer mb-2 gap-2">
+                    <span class="inline-flex align-items-center justify-content-center border-circle bg-primary w-3rem h-3rem">
+                        <i :class="[item.icon, 'text-lg']"></i>
+                    </span>
+                    <span class="inline-flex flex-column gap-1">
+                        <span class="font-medium text-lg text-900">{{ item.label }}</span>
+                        <span class="white-space-nowrap">{{ item.subtext }}</span>
+                    </span>
+                </a>
+                <div v-else class="flex flex-column align-items-start gap-3">
+                    <img alt="megamenu-demo" :src="item.image" class="w-full" />
+                    <span>{{ item.subtext }}</span>
+                    <Button :label="item.label" outlined />
+                </div>
             </template>
             <template #end>
-                <InputText placeholder="Search" type="text" />
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
             </template>
         </MegaMenu>
     </div>
@@ -36,173 +52,124 @@ export default {
         return {
             items: [
                 {
-                    label: 'Videos',
-                    icon: 'pi pi-fw pi-video',
+                    label: 'Company',
+                    root: true,
                     items: [
                         [
                             {
-                                label: 'Video 1',
-                                items: [{ label: 'Video 1.1' }, { label: 'Video 1.2' }]
-                            },
-                            {
-                                label: 'Video 2',
-                                items: [{ label: 'Video 2.1' }, { label: 'Video 2.2' }]
+                                items: [
+                                    { label: 'Features', icon: 'pi pi-list', subtext: 'Subtext of item' },
+                                    { label: 'Customers', icon: 'pi pi-users', subtext: 'Subtext of item' },
+                                    { label: 'Case Studies', icon: 'pi pi-file', subtext: 'Subtext of item' }
+                                ]
                             }
                         ],
                         [
                             {
-                                label: 'Video 3',
-                                items: [{ label: 'Video 3.1' }, { label: 'Video 3.2' }]
-                            },
+                                items: [
+                                    { label: 'Solutions', icon: 'pi pi-shield', subtext: 'Subtext of item' },
+                                    { label: 'Faq', icon: 'pi pi-question', subtext: 'Subtext of item' },
+                                    { label: 'Library', icon: 'pi pi-search', subtext: 'Subtext of item' }
+                                ]
+                            }
+                        ],
+                        [
                             {
-                                label: 'Video 4',
-                                items: [{ label: 'Video 4.1' }, { label: 'Video 4.2' }]
+                                items: [
+                                    { label: 'Community', icon: 'pi pi-comments', subtext: 'Subtext of item' },
+                                    { label: 'Rewards', icon: 'pi pi-star', subtext: 'Subtext of item' },
+                                    { label: 'Investors', icon: 'pi pi-globe', subtext: 'Subtext of item' }
+                                ]
+                            }
+                        ],
+                        [
+                            {
+                                items: [{ image: 'https://primefaces.org/cdn/primevue/images/uikit/uikit-system.png', label: 'GET STARTED', subtext: 'Build spectacular apps in no time.' }]
                             }
                         ]
                     ]
                 },
                 {
-                    label: 'Users',
-                    icon: 'pi pi-fw pi-users',
-                    items: [
-                        [
-                            {
-                                label: 'User 1',
-                                items: [{ label: 'User 1.1' }, { label: 'User 1.2' }]
-                            },
-                            {
-                                label: 'User 2',
-                                items: [{ label: 'User 2.1' }, { label: 'User 2.2' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'User 3',
-                                items: [{ label: 'User 3.1' }, { label: 'User 3.2' }]
-                            },
-                            {
-                                label: 'User 4',
-                                items: [{ label: 'User 4.1' }, { label: 'User 4.2' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'User 5',
-                                items: [{ label: 'User 5.1' }, { label: 'User 5.2' }]
-                            },
-                            {
-                                label: 'User 6',
-                                items: [{ label: 'User 6.1' }, { label: 'User 6.2' }]
-                            }
-                        ]
-                    ]
+                    label: 'Resources',
+                    root: true
                 },
                 {
-                    label: 'Events',
-                    icon: 'pi pi-fw pi-calendar',
-                    items: [
-                        [
-                            {
-                                label: 'Event 1',
-                                items: [{ label: 'Event 1.1' }, { label: 'Event 1.2' }]
-                            },
-                            {
-                                label: 'Event 2',
-                                items: [{ label: 'Event 2.1' }, { label: 'Event 2.2' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Event 3',
-                                items: [{ label: 'Event 3.1' }, { label: 'Event 3.2' }]
-                            },
-                            {
-                                label: 'Event 4',
-                                items: [{ label: 'Event 4.1' }, { label: 'Event 4.2' }]
-                            }
-                        ]
-                    ]
-                },
-                {
-                    label: 'Settings',
-                    icon: 'pi pi-fw pi-cog',
-                    items: [
-                        [
-                            {
-                                label: 'Setting 1',
-                                items: [{ label: 'Setting 1.1' }, { label: 'Setting 1.2' }]
-                            },
-                            {
-                                label: 'Setting 2',
-                                items: [{ label: 'Setting 2.1' }, { label: 'Setting 2.2' }]
-                            },
-                            {
-                                label: 'Setting 3',
-                                items: [{ label: 'Setting 3.1' }, { label: 'Setting 3.2' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Technology 4',
-                                items: [{ label: 'Setting 4.1' }, { label: 'Setting 4.2' }]
-                            }
-                        ]
-                    ]
-                },
-                {
-                    label: 'Upload',
-                    icon: 'pi pi-fw pi-upload',
-                    route: '/fileupload'
+                    label: 'Contact',
+                    root: true
                 }
             ],
             code: {
                 basic: `
-<MegaMenu :model="items" orientation="horizontal">
+<MegaMenu :model="items" class="p-3 surface-0 shadow-2" style="border-radius: 3rem">
     <template #start>
-        <img alt="logo" src="https://primefaces.org/cdn/primevue/images/primevue-logo-dark.svg" height="24" class="mr-2" />
+        <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-2rem">
+            <path d="..." fill="var(--primary-color)" />
+            <path d="..." fill="var(--text-color)" />
+        </svg>
     </template>
-    <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">
-                <span v-bind="props.icon" />
-                <span v-bind="props.label">{{ label }}</span>
-            </a>
-        </router-link>
-        <a v-else :href="item.url" :target="item.target" v-bind="props.action">
-            <span v-bind="props.icon" />
-            <span v-bind="props.label">{{ label }}</span>
-            <span :class="[hasSubmenu && 'pi pi-fw pi-angle-down']" v-bind="props.submenuicon" />
+    <template #item="{ item }">
+        <a v-if="item.root" v-ripple class="flex align-items-center cursor-pointer px-3 py-2 overflow-hidden relative font-semibold text-lg uppercase" style="border-radius: 2rem">
+            <span :class="item.icon" />
+            <span class="ml-2">{{ item.label }}</span>
         </a>
+        <a v-else-if="!item.image" class="flex align-items-center p-3 cursor-pointer mb-2 gap-2">
+            <span class="inline-flex align-items-center justify-content-center border-circle bg-primary w-3rem h-3rem">
+                <i :class="[item.icon, 'text-lg']"></i>
+            </span>
+            <span class="inline-flex flex-column gap-1">
+                <span class="font-medium text-lg text-900">{{ item.label }}</span>
+                <span class="white-space-nowrap">{{ item.subtext }}</span>
+            </span>
+        </a>
+        <div v-else class="flex flex-column align-items-start gap-3">
+            <img alt="megamenu-demo" :src="item.image" class="w-full" />
+            <span>{{ item.subtext }}</span>
+            <Button :label="item.label" outlined />
+        </div>
     </template>
     <template #end>
-        <InputText placeholder="Search" type="text" />
+        <Avatar image="/images/avatar/amyelsner.png" shape="circle" />
     </template>
 </MegaMenu>
 `,
                 options: `
 <template>
     <div class="card">
-        <MegaMenu :model="items" orientation="horizontal">
+        <MegaMenu :model="items" class="p-3 surface-0 shadow-2" style="border-radius: 3rem">
             <template #start>
-                <span class="flex align-items-center">
-                    <img alt="logo" src="https://primefaces.org/cdn/primevue/images/primevue-logo-dark.svg" height="24" class="mr-2" />
-                </span>
+                <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-2rem">
+                    <path
+                        d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
+                        fill="var(--primary-color)"
+                    />
+                    <path
+                        d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
+                        fill="var(--text-color)"
+                    />
+                </svg>
             </template>
-            <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">
-                        <span v-bind="props.icon" />
-                        <span v-bind="props.label">{{ label }}</span>
-                    </a>
-                </router-link>
-                <a v-else :href="item.url" :target="item.target" v-bind="props.action">
-                    <span v-bind="props.icon" />
-                    <span v-bind="props.label">{{ label }}</span>
-                    <span :class="[hasSubmenu && 'pi pi-fw pi-angle-down']" v-bind="props.submenuicon" />
+            <template #item="{ item }">
+                <a v-if="item.root" v-ripple class="flex align-items-center cursor-pointer px-3 py-2 overflow-hidden relative font-semibold text-lg uppercase" style="border-radius: 2rem">
+                    <span :class="item.icon" />
+                    <span class="ml-2">{{ item.label }}</span>
                 </a>
+                <a v-else-if="!item.image" class="flex align-items-center p-3 cursor-pointer mb-2 gap-2">
+                    <span class="inline-flex align-items-center justify-content-center border-circle bg-primary w-3rem h-3rem">
+                        <i :class="[item.icon, 'text-lg']"></i>
+                    </span>
+                    <span class="inline-flex flex-column gap-1">
+                        <span class="font-medium text-lg text-900">{{ item.label }}</span>
+                        <span class="white-space-nowrap">{{ item.subtext }}</span>
+                    </span>
+                </a>
+                <div v-else class="flex flex-column align-items-start gap-3">
+                    <img alt="megamenu-demo" :src="item.image" class="w-full" />
+                    <span>{{ item.subtext }}</span>
+                    <Button :label="item.label" outlined />
+                </div>
             </template>
             <template #end>
-                <InputText placeholder="Search" type="text" />
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
             </template>
         </MegaMenu>
     </div>
@@ -214,123 +181,50 @@ export default {
         return {
             items: [
                 {
-                    label: 'Videos',
-                    icon: 'pi pi-fw pi-video',
+                    label: 'Company',
+                    root: true,
                     items: [
                         [
                             {
-                                label: 'Video 1',
-                                items: [{ label: 'Video 1.1' }, { label: 'Video 1.2' }]
-                            },
-                            {
-                                label: 'Video 2',
-                                items: [{ label: 'Video 2.1' }, { label: 'Video 2.2' }]
+                                items: [
+                                    { label: 'Features', icon: 'pi pi-list', subtext: 'Subtext of item' },
+                                    { label: 'Customers', icon: 'pi pi-users', subtext: 'Subtext of item' },
+                                    { label: 'Case Studies', icon: 'pi pi-file', subtext: 'Subtext of item' }
+                                ]
                             }
                         ],
                         [
                             {
-                                label: 'Video 3',
-                                items: [{ label: 'Video 3.1' }, { label: 'Video 3.2' }]
-                            },
+                                items: [
+                                    { label: 'Solutions', icon: 'pi pi-shield', subtext: 'Subtext of item' },
+                                    { label: 'Faq', icon: 'pi pi-question', subtext: 'Subtext of item' },
+                                    { label: 'Library', icon: 'pi pi-search', subtext: 'Subtext of item' }
+                                ]
+                            }
+                        ],
+                        [
                             {
-                                label: 'Video 4',
-                                items: [{ label: 'Video 4.1' }, { label: 'Video 4.2' }]
+                                items: [
+                                    { label: 'Community', icon: 'pi pi-comments', subtext: 'Subtext of item' },
+                                    { label: 'Rewards', icon: 'pi pi-star', subtext: 'Subtext of item' },
+                                    { label: 'Investors', icon: 'pi pi-globe', subtext: 'Subtext of item' }
+                                ]
+                            }
+                        ],
+                        [
+                            {
+                                items: [{ image: 'https://primefaces.org/cdn/primevue/images/uikit/uikit-system.png', label: 'GET STARTED', subtext: 'Build spectacular apps in no time.' }]
                             }
                         ]
                     ]
                 },
                 {
-                    label: 'Users',
-                    icon: 'pi pi-fw pi-users',
-                    items: [
-                        [
-                            {
-                                label: 'User 1',
-                                items: [{ label: 'User 1.1' }, { label: 'User 1.2' }]
-                            },
-                            {
-                                label: 'User 2',
-                                items: [{ label: 'User 2.1' }, { label: 'User 2.2' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'User 3',
-                                items: [{ label: 'User 3.1' }, { label: 'User 3.2' }]
-                            },
-                            {
-                                label: 'User 4',
-                                items: [{ label: 'User 4.1' }, { label: 'User 4.2' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'User 5',
-                                items: [{ label: 'User 5.1' }, { label: 'User 5.2' }]
-                            },
-                            {
-                                label: 'User 6',
-                                items: [{ label: 'User 6.1' }, { label: 'User 6.2' }]
-                            }
-                        ]
-                    ]
+                    label: 'Resources',
+                    root: true
                 },
                 {
-                    label: 'Events',
-                    icon: 'pi pi-fw pi-calendar',
-                    items: [
-                        [
-                            {
-                                label: 'Event 1',
-                                items: [{ label: 'Event 1.1' }, { label: 'Event 1.2' }]
-                            },
-                            {
-                                label: 'Event 2',
-                                items: [{ label: 'Event 2.1' }, { label: 'Event 2.2' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Event 3',
-                                items: [{ label: 'Event 3.1' }, { label: 'Event 3.2' }]
-                            },
-                            {
-                                label: 'Event 4',
-                                items: [{ label: 'Event 4.1' }, { label: 'Event 4.2' }]
-                            }
-                        ]
-                    ]
-                },
-                {
-                    label: 'Settings',
-                    icon: 'pi pi-fw pi-cog',
-                    items: [
-                        [
-                            {
-                                label: 'Setting 1',
-                                items: [{ label: 'Setting 1.1' }, { label: 'Setting 1.2' }]
-                            },
-                            {
-                                label: 'Setting 2',
-                                items: [{ label: 'Setting 2.1' }, { label: 'Setting 2.2' }]
-                            },
-                            {
-                                label: 'Setting 3',
-                                items: [{ label: 'Setting 3.1' }, { label: 'Setting 3.2' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Technology 4',
-                                items: [{ label: 'Setting 4.1' }, { label: 'Setting 4.2' }]
-                            }
-                        ]
-                    ]
-                },
-                {
-                    label: 'Upload',
-                    icon: 'pi pi-fw pi-upload',
-                    route: '/fileupload'
+                    label: 'Contact',
+                    root: true
                 }
             ]
         };
@@ -338,152 +232,98 @@ export default {
 };
 <\/script>
 `,
-                composition: `<MegaMenu :model="items" orientation="horizontal">
-    <template #start>
-        <span class="flex align-items-center">
-            <img alt="logo" src="https://primefaces.org/cdn/primevue/images/primevue-logo-dark.svg" height="24" class="mr-2" />
-        </span>
-    </template>
-    <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">
-                <span v-bind="props.icon" />
-                <span v-bind="props.label">{{ label }}</span>
-            </a>
-        </router-link>
-        <a v-else :href="item.url" :target="item.target" v-bind="props.action">
-            <span v-bind="props.icon" />
-            <span v-bind="props.label">{{ label }}</span>
-            <span :class="[hasSubmenu && 'pi pi-fw pi-angle-down']" v-bind="props.submenuicon" />
-        </a>
-    </template>
-    <template #end>
-        <InputText placeholder="Search" type="text" />
-    </template>
-</MegaMenu>
+                composition: `
+<template>
+    <div class="card">
+        <MegaMenu :model="items" class="p-3 surface-0 shadow-2" style="border-radius: 3rem">
+            <template #start>
+                <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-2rem">
+                    <path
+                        d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
+                        fill="var(--primary-color)"
+                    />
+                    <path
+                        d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
+                        fill="var(--text-color)"
+                    />
+                </svg>
+            </template>
+            <template #item="{ item }">
+                <a v-if="item.root" v-ripple class="flex align-items-center cursor-pointer px-3 py-2 overflow-hidden relative font-semibold text-lg uppercase" style="border-radius: 2rem">
+                    <span :class="item.icon" />
+                    <span class="ml-2">{{ item.label }}</span>
+                </a>
+                <a v-else-if="!item.image" class="flex align-items-center p-3 cursor-pointer mb-2 gap-2">
+                    <span class="inline-flex align-items-center justify-content-center border-circle bg-primary w-3rem h-3rem">
+                        <i :class="[item.icon, 'text-lg']"></i>
+                    </span>
+                    <span class="inline-flex flex-column gap-1">
+                        <span class="font-medium text-lg text-900">{{ item.label }}</span>
+                        <span class="white-space-nowrap">{{ item.subtext }}</span>
+                    </span>
+                </a>
+                <div v-else class="flex flex-column align-items-start gap-3">
+                    <img alt="megamenu-demo" :src="item.image" class="w-full" />
+                    <span>{{ item.subtext }}</span>
+                    <Button :label="item.label" outlined />
+                </div>
+            </template>
+            <template #end>
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+            </template>
+        </MegaMenu>
+    </div>
+</template>
 
 <script setup>
 import { ref } from "vue";
 
 const items = ref([
     {
-        label: 'Videos',
-        icon: 'pi pi-fw pi-video',
+        label: 'Company',
+        root: true,
         items: [
             [
                 {
-                    label: 'Video 1',
-                    items: [{ label: 'Video 1.1' }, { label: 'Video 1.2' }]
-                },
-                {
-                    label: 'Video 2',
-                    items: [{ label: 'Video 2.1' }, { label: 'Video 2.2' }]
+                    items: [
+                        { label: 'Features', icon: 'pi pi-list', subtext: 'Subtext of item' },
+                        { label: 'Customers', icon: 'pi pi-users', subtext: 'Subtext of item' },
+                        { label: 'Case Studies', icon: 'pi pi-file', subtext: 'Subtext of item' }
+                    ]
                 }
             ],
             [
                 {
-                    label: 'Video 3',
-                    items: [{ label: 'Video 3.1' }, { label: 'Video 3.2' }]
-                },
+                    items: [
+                        { label: 'Solutions', icon: 'pi pi-shield', subtext: 'Subtext of item' },
+                        { label: 'Faq', icon: 'pi pi-question', subtext: 'Subtext of item' },
+                        { label: 'Library', icon: 'pi pi-search', subtext: 'Subtext of item' }
+                    ]
+                }
+            ],
+            [
                 {
-                    label: 'Video 4',
-                    items: [{ label: 'Video 4.1' }, { label: 'Video 4.2' }]
+                    items: [
+                        { label: 'Community', icon: 'pi pi-comments', subtext: 'Subtext of item' },
+                        { label: 'Rewards', icon: 'pi pi-star', subtext: 'Subtext of item' },
+                        { label: 'Investors', icon: 'pi pi-globe', subtext: 'Subtext of item' }
+                    ]
+                }
+            ],
+            [
+                {
+                    items: [{ image: 'https://primefaces.org/cdn/primevue/images/uikit/uikit-system.png', label: 'GET STARTED', subtext: 'Build spectacular apps in no time.' }]
                 }
             ]
         ]
     },
     {
-        label: 'Users',
-        icon: 'pi pi-fw pi-users',
-        items: [
-            [
-                {
-                    label: 'User 1',
-                    items: [{ label: 'User 1.1' }, { label: 'User 1.2' }]
-                },
-                {
-                    label: 'User 2',
-                    items: [{ label: 'User 2.1' }, { label: 'User 2.2' }]
-                }
-            ],
-            [
-                {
-                    label: 'User 3',
-                    items: [{ label: 'User 3.1' }, { label: 'User 3.2' }]
-                },
-                {
-                    label: 'User 4',
-                    items: [{ label: 'User 4.1' }, { label: 'User 4.2' }]
-                }
-            ],
-            [
-                {
-                    label: 'User 5',
-                    items: [{ label: 'User 5.1' }, { label: 'User 5.2' }]
-                },
-                {
-                    label: 'User 6',
-                    items: [{ label: 'User 6.1' }, { label: 'User 6.2' }]
-                }
-            ]
-        ]
+        label: 'Resources',
+        root: true
     },
     {
-        label: 'Events',
-        icon: 'pi pi-fw pi-calendar',
-        items: [
-            [
-                {
-                    label: 'Event 1',
-                    items: [{ label: 'Event 1.1' }, { label: 'Event 1.2' }]
-                },
-                {
-                    label: 'Event 2',
-                    items: [{ label: 'Event 2.1' }, { label: 'Event 2.2' }]
-                }
-            ],
-            [
-                {
-                    label: 'Event 3',
-                    items: [{ label: 'Event 3.1' }, { label: 'Event 3.2' }]
-                },
-                {
-                    label: 'Event 4',
-                    items: [{ label: 'Event 4.1' }, { label: 'Event 4.2' }]
-                }
-            ]
-        ]
-    },
-    {
-        label: 'Settings',
-        icon: 'pi pi-fw pi-cog',
-        items: [
-            [
-                {
-                    label: 'Setting 1',
-                    items: [{ label: 'Setting 1.1' }, { label: 'Setting 1.2' }]
-                },
-                {
-                    label: 'Setting 2',
-                    items: [{ label: 'Setting 2.1' }, { label: 'Setting 2.2' }]
-                },
-                {
-                    label: 'Setting 3',
-                    items: [{ label: 'Setting 3.1' }, { label: 'Setting 3.2' }]
-                }
-            ],
-            [
-                {
-                    label: 'Technology 4',
-                    items: [{ label: 'Setting 4.1' }, { label: 'Setting 4.2' }]
-                }
-            ]
-        ]
-    },
-    {
-        label: 'Upload',
-        icon: 'pi pi-fw pi-upload',
-        route: '/fileupload'
+        label: 'Contact',
+        root: true
     }
 ]);
 <\/script>
diff --git a/doc/megamenu/VerticalDoc.vue b/doc/megamenu/VerticalDoc.vue
index 4c59af5ce..f6c72c25d 100644
--- a/doc/megamenu/VerticalDoc.vue
+++ b/doc/megamenu/VerticalDoc.vue
@@ -14,115 +14,95 @@ export default {
         return {
             items: [
                 {
-                    label: 'Videos',
-                    icon: 'pi pi-fw pi-video',
+                    label: 'Furniture',
+                    icon: 'pi pi-box',
                     items: [
                         [
                             {
-                                label: 'Video 1',
-                                items: [{ label: 'Video 1.1' }, { label: 'Video 1.2' }]
-                            },
-                            {
-                                label: 'Video 2',
-                                items: [{ label: 'Video 2.1' }, { label: 'Video 2.2' }]
+                                label: 'Living Room',
+                                items: [{ label: 'Accessories' }, { label: 'Armchair' }, { label: 'Coffee Table' }, { label: 'Couch' }, { label: 'TV Stand' }]
                             }
                         ],
                         [
                             {
-                                label: 'Video 3',
-                                items: [{ label: 'Video 3.1' }, { label: 'Video 3.2' }]
+                                label: 'Kitchen',
+                                items: [{ label: 'Bar stool' }, { label: 'Chair' }, { label: 'Table' }]
                             },
                             {
-                                label: 'Video 4',
-                                items: [{ label: 'Video 4.1' }, { label: 'Video 4.2' }]
+                                label: 'Bathroom',
+                                items: [{ label: 'Accessories' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Bedroom',
+                                items: [{ label: 'Bed' }, { label: 'Chaise lounge' }, { label: 'Cupboard' }, { label: 'Dresser' }, { label: 'Wardrobe' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Office',
+                                items: [{ label: 'Bookcase' }, { label: 'Cabinet' }, { label: 'Chair' }, { label: 'Desk' }, { label: 'Executive Chair' }]
                             }
                         ]
                     ]
                 },
                 {
-                    label: 'Users',
-                    icon: 'pi pi-fw pi-users',
+                    label: 'Electronics',
+                    icon: 'pi pi-mobile',
                     items: [
                         [
                             {
-                                label: 'User 1',
-                                items: [{ label: 'User 1.1' }, { label: 'User 1.2' }]
-                            },
-                            {
-                                label: 'User 2',
-                                items: [{ label: 'User 2.1' }, { label: 'User 2.2' }]
+                                label: 'Computer',
+                                items: [{ label: 'Monitor' }, { label: 'Mouse' }, { label: 'Notebook' }, { label: 'Keyboard' }, { label: 'Printer' }, { label: 'Storage' }]
                             }
                         ],
                         [
                             {
-                                label: 'User 3',
-                                items: [{ label: 'User 3.1' }, { label: 'User 3.2' }]
-                            },
-                            {
-                                label: 'User 4',
-                                items: [{ label: 'User 4.1' }, { label: 'User 4.2' }]
+                                label: 'Home Theather',
+                                items: [{ label: 'Projector' }, { label: 'Speakers' }, { label: 'TVs' }]
                             }
                         ],
                         [
                             {
-                                label: 'User 5',
-                                items: [{ label: 'User 5.1' }, { label: 'User 5.2' }]
-                            },
+                                label: 'Gaming',
+                                items: [{ label: 'Accessories' }, { label: 'Console' }, { label: 'PC' }, { label: 'Video Games' }]
+                            }
+                        ],
+                        [
                             {
-                                label: 'User 6',
-                                items: [{ label: 'User 6.1' }, { label: 'User 6.2' }]
+                                label: 'Appliances',
+                                items: [{ label: 'Coffee Machine' }, { label: 'Fridge' }, { label: 'Oven' }, { label: 'Vaccum Cleaner' }, { label: 'Washing Machine' }]
                             }
                         ]
                     ]
                 },
                 {
-                    label: 'Events',
-                    icon: 'pi pi-fw pi-calendar',
+                    label: 'Sports',
+                    icon: 'pi pi-clock',
                     items: [
                         [
                             {
-                                label: 'Event 1',
-                                items: [{ label: 'Event 1.1' }, { label: 'Event 1.2' }]
-                            },
-                            {
-                                label: 'Event 2',
-                                items: [{ label: 'Event 2.1' }, { label: 'Event 2.2' }]
+                                label: 'Football',
+                                items: [{ label: 'Kits' }, { label: 'Shoes' }, { label: 'Shorts' }, { label: 'Training' }]
                             }
                         ],
                         [
                             {
-                                label: 'Event 3',
-                                items: [{ label: 'Event 3.1' }, { label: 'Event 3.2' }]
-                            },
-                            {
-                                label: 'Event 4',
-                                items: [{ label: 'Event 4.1' }, { label: 'Event 4.2' }]
-                            }
-                        ]
-                    ]
-                },
-                {
-                    label: 'Settings',
-                    icon: 'pi pi-fw pi-cog',
-                    items: [
-                        [
-                            {
-                                label: 'Setting 1',
-                                items: [{ label: 'Setting 1.1' }, { label: 'Setting 1.2' }]
-                            },
-                            {
-                                label: 'Setting 2',
-                                items: [{ label: 'Setting 2.1' }, { label: 'Setting 2.2' }]
-                            },
-                            {
-                                label: 'Setting 3',
-                                items: [{ label: 'Setting 3.1' }, { label: 'Setting 3.2' }]
+                                label: 'Running',
+                                items: [{ label: 'Accessories' }, { label: 'Shoes' }, { label: 'T-Shirts' }, { label: 'Shorts' }]
                             }
                         ],
                         [
                             {
-                                label: 'Technology 4',
-                                items: [{ label: 'Setting 4.1' }, { label: 'Setting 4.2' }]
+                                label: 'Swimming',
+                                items: [{ label: 'Kickboard' }, { label: 'Nose Clip' }, { label: 'Swimsuits' }, { label: 'Paddles' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Tennis',
+                                items: [{ label: 'Balls' }, { label: 'Rackets' }, { label: 'Shoes' }, { label: 'Training' }]
                             }
                         ]
                     ]
@@ -145,115 +125,95 @@ export default {
         return {
             items: [
                 {
-                    label: 'Videos',
-                    icon: 'pi pi-fw pi-video',
+                    label: 'Furniture',
+                    icon: 'pi pi-box',
                     items: [
                         [
                             {
-                                label: 'Video 1',
-                                items: [{ label: 'Video 1.1' }, { label: 'Video 1.2' }]
-                            },
-                            {
-                                label: 'Video 2',
-                                items: [{ label: 'Video 2.1' }, { label: 'Video 2.2' }]
+                                label: 'Living Room',
+                                items: [{ label: 'Accessories' }, { label: 'Armchair' }, { label: 'Coffee Table' }, { label: 'Couch' }, { label: 'TV Stand' }]
                             }
                         ],
                         [
                             {
-                                label: 'Video 3',
-                                items: [{ label: 'Video 3.1' }, { label: 'Video 3.2' }]
+                                label: 'Kitchen',
+                                items: [{ label: 'Bar stool' }, { label: 'Chair' }, { label: 'Table' }]
                             },
                             {
-                                label: 'Video 4',
-                                items: [{ label: 'Video 4.1' }, { label: 'Video 4.2' }]
+                                label: 'Bathroom',
+                                items: [{ label: 'Accessories' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Bedroom',
+                                items: [{ label: 'Bed' }, { label: 'Chaise lounge' }, { label: 'Cupboard' }, { label: 'Dresser' }, { label: 'Wardrobe' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Office',
+                                items: [{ label: 'Bookcase' }, { label: 'Cabinet' }, { label: 'Chair' }, { label: 'Desk' }, { label: 'Executive Chair' }]
                             }
                         ]
                     ]
                 },
                 {
-                    label: 'Users',
-                    icon: 'pi pi-fw pi-users',
+                    label: 'Electronics',
+                    icon: 'pi pi-mobile',
                     items: [
                         [
                             {
-                                label: 'User 1',
-                                items: [{ label: 'User 1.1' }, { label: 'User 1.2' }]
-                            },
-                            {
-                                label: 'User 2',
-                                items: [{ label: 'User 2.1' }, { label: 'User 2.2' }]
+                                label: 'Computer',
+                                items: [{ label: 'Monitor' }, { label: 'Mouse' }, { label: 'Notebook' }, { label: 'Keyboard' }, { label: 'Printer' }, { label: 'Storage' }]
                             }
                         ],
                         [
                             {
-                                label: 'User 3',
-                                items: [{ label: 'User 3.1' }, { label: 'User 3.2' }]
-                            },
-                            {
-                                label: 'User 4',
-                                items: [{ label: 'User 4.1' }, { label: 'User 4.2' }]
+                                label: 'Home Theather',
+                                items: [{ label: 'Projector' }, { label: 'Speakers' }, { label: 'TVs' }]
                             }
                         ],
                         [
                             {
-                                label: 'User 5',
-                                items: [{ label: 'User 5.1' }, { label: 'User 5.2' }]
-                            },
+                                label: 'Gaming',
+                                items: [{ label: 'Accessories' }, { label: 'Console' }, { label: 'PC' }, { label: 'Video Games' }]
+                            }
+                        ],
+                        [
                             {
-                                label: 'User 6',
-                                items: [{ label: 'User 6.1' }, { label: 'User 6.2' }]
+                                label: 'Appliances',
+                                items: [{ label: 'Coffee Machine' }, { label: 'Fridge' }, { label: 'Oven' }, { label: 'Vaccum Cleaner' }, { label: 'Washing Machine' }]
                             }
                         ]
                     ]
                 },
                 {
-                    label: 'Events',
-                    icon: 'pi pi-fw pi-calendar',
+                    label: 'Sports',
+                    icon: 'pi pi-clock',
                     items: [
                         [
                             {
-                                label: 'Event 1',
-                                items: [{ label: 'Event 1.1' }, { label: 'Event 1.2' }]
-                            },
-                            {
-                                label: 'Event 2',
-                                items: [{ label: 'Event 2.1' }, { label: 'Event 2.2' }]
+                                label: 'Football',
+                                items: [{ label: 'Kits' }, { label: 'Shoes' }, { label: 'Shorts' }, { label: 'Training' }]
                             }
                         ],
                         [
                             {
-                                label: 'Event 3',
-                                items: [{ label: 'Event 3.1' }, { label: 'Event 3.2' }]
-                            },
-                            {
-                                label: 'Event 4',
-                                items: [{ label: 'Event 4.1' }, { label: 'Event 4.2' }]
-                            }
-                        ]
-                    ]
-                },
-                {
-                    label: 'Settings',
-                    icon: 'pi pi-fw pi-cog',
-                    items: [
-                        [
-                            {
-                                label: 'Setting 1',
-                                items: [{ label: 'Setting 1.1' }, { label: 'Setting 1.2' }]
-                            },
-                            {
-                                label: 'Setting 2',
-                                items: [{ label: 'Setting 2.1' }, { label: 'Setting 2.2' }]
-                            },
-                            {
-                                label: 'Setting 3',
-                                items: [{ label: 'Setting 3.1' }, { label: 'Setting 3.2' }]
+                                label: 'Running',
+                                items: [{ label: 'Accessories' }, { label: 'Shoes' }, { label: 'T-Shirts' }, { label: 'Shorts' }]
                             }
                         ],
                         [
                             {
-                                label: 'Technology 4',
-                                items: [{ label: 'Setting 4.1' }, { label: 'Setting 4.2' }]
+                                label: 'Swimming',
+                                items: [{ label: 'Kickboard' }, { label: 'Nose Clip' }, { label: 'Swimsuits' }, { label: 'Paddles' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Tennis',
+                                items: [{ label: 'Balls' }, { label: 'Rackets' }, { label: 'Shoes' }, { label: 'Training' }]
                             }
                         ]
                     ]
@@ -276,115 +236,95 @@ import { ref } from "vue";
 
 const items = ref([
     {
-        label: 'Videos',
-        icon: 'pi pi-fw pi-video',
+        label: 'Furniture',
+        icon: 'pi pi-box',
         items: [
             [
                 {
-                    label: 'Video 1',
-                    items: [{ label: 'Video 1.1' }, { label: 'Video 1.2' }]
-                },
-                {
-                    label: 'Video 2',
-                    items: [{ label: 'Video 2.1' }, { label: 'Video 2.2' }]
+                    label: 'Living Room',
+                    items: [{ label: 'Accessories' }, { label: 'Armchair' }, { label: 'Coffee Table' }, { label: 'Couch' }, { label: 'TV Stand' }]
                 }
             ],
             [
                 {
-                    label: 'Video 3',
-                    items: [{ label: 'Video 3.1' }, { label: 'Video 3.2' }]
+                    label: 'Kitchen',
+                    items: [{ label: 'Bar stool' }, { label: 'Chair' }, { label: 'Table' }]
                 },
                 {
-                    label: 'Video 4',
-                    items: [{ label: 'Video 4.1' }, { label: 'Video 4.2' }]
+                    label: 'Bathroom',
+                    items: [{ label: 'Accessories' }]
+                }
+            ],
+            [
+                {
+                    label: 'Bedroom',
+                    items: [{ label: 'Bed' }, { label: 'Chaise lounge' }, { label: 'Cupboard' }, { label: 'Dresser' }, { label: 'Wardrobe' }]
+                }
+            ],
+            [
+                {
+                    label: 'Office',
+                    items: [{ label: 'Bookcase' }, { label: 'Cabinet' }, { label: 'Chair' }, { label: 'Desk' }, { label: 'Executive Chair' }]
                 }
             ]
         ]
     },
     {
-        label: 'Users',
-        icon: 'pi pi-fw pi-users',
+        label: 'Electronics',
+        icon: 'pi pi-mobile',
         items: [
             [
                 {
-                    label: 'User 1',
-                    items: [{ label: 'User 1.1' }, { label: 'User 1.2' }]
-                },
-                {
-                    label: 'User 2',
-                    items: [{ label: 'User 2.1' }, { label: 'User 2.2' }]
+                    label: 'Computer',
+                    items: [{ label: 'Monitor' }, { label: 'Mouse' }, { label: 'Notebook' }, { label: 'Keyboard' }, { label: 'Printer' }, { label: 'Storage' }]
                 }
             ],
             [
                 {
-                    label: 'User 3',
-                    items: [{ label: 'User 3.1' }, { label: 'User 3.2' }]
-                },
-                {
-                    label: 'User 4',
-                    items: [{ label: 'User 4.1' }, { label: 'User 4.2' }]
+                    label: 'Home Theather',
+                    items: [{ label: 'Projector' }, { label: 'Speakers' }, { label: 'TVs' }]
                 }
             ],
             [
                 {
-                    label: 'User 5',
-                    items: [{ label: 'User 5.1' }, { label: 'User 5.2' }]
-                },
+                    label: 'Gaming',
+                    items: [{ label: 'Accessories' }, { label: 'Console' }, { label: 'PC' }, { label: 'Video Games' }]
+                }
+            ],
+            [
                 {
-                    label: 'User 6',
-                    items: [{ label: 'User 6.1' }, { label: 'User 6.2' }]
+                    label: 'Appliances',
+                    items: [{ label: 'Coffee Machine' }, { label: 'Fridge' }, { label: 'Oven' }, { label: 'Vaccum Cleaner' }, { label: 'Washing Machine' }]
                 }
             ]
         ]
     },
     {
-        label: 'Events',
-        icon: 'pi pi-fw pi-calendar',
+        label: 'Sports',
+        icon: 'pi pi-clock',
         items: [
             [
                 {
-                    label: 'Event 1',
-                    items: [{ label: 'Event 1.1' }, { label: 'Event 1.2' }]
-                },
-                {
-                    label: 'Event 2',
-                    items: [{ label: 'Event 2.1' }, { label: 'Event 2.2' }]
+                    label: 'Football',
+                    items: [{ label: 'Kits' }, { label: 'Shoes' }, { label: 'Shorts' }, { label: 'Training' }]
                 }
             ],
             [
                 {
-                    label: 'Event 3',
-                    items: [{ label: 'Event 3.1' }, { label: 'Event 3.2' }]
-                },
-                {
-                    label: 'Event 4',
-                    items: [{ label: 'Event 4.1' }, { label: 'Event 4.2' }]
-                }
-            ]
-        ]
-    },
-    {
-        label: 'Settings',
-        icon: 'pi pi-fw pi-cog',
-        items: [
-            [
-                {
-                    label: 'Setting 1',
-                    items: [{ label: 'Setting 1.1' }, { label: 'Setting 1.2' }]
-                },
-                {
-                    label: 'Setting 2',
-                    items: [{ label: 'Setting 2.1' }, { label: 'Setting 2.2' }]
-                },
-                {
-                    label: 'Setting 3',
-                    items: [{ label: 'Setting 3.1' }, { label: 'Setting 3.2' }]
+                    label: 'Running',
+                    items: [{ label: 'Accessories' }, { label: 'Shoes' }, { label: 'T-Shirts' }, { label: 'Shorts' }]
                 }
             ],
             [
                 {
-                    label: 'Technology 4',
-                    items: [{ label: 'Setting 4.1' }, { label: 'Setting 4.2' }]
+                    label: 'Swimming',
+                    items: [{ label: 'Kickboard' }, { label: 'Nose Clip' }, { label: 'Swimsuits' }, { label: 'Paddles' }]
+                }
+            ],
+            [
+                {
+                    label: 'Tennis',
+                    items: [{ label: 'Balls' }, { label: 'Rackets' }, { label: 'Shoes' }, { label: 'Training' }]
                 }
             ]
         ]
diff --git a/pages/megamenu/index.vue b/pages/megamenu/index.vue
index ed8e8f69c..8a308598d 100755
--- a/pages/megamenu/index.vue
+++ b/pages/megamenu/index.vue
@@ -2,7 +2,7 @@
     <DocComponent
         title="Vue MegaMenu Component"
         header="MegaMenu"
-        description="MegaMenu is navigation component that displays submenus together."
+        description="MegaMenu is a navigation component that displays submenus and content in columns."
         :componentDocs="docs"
         :apiDocs="['MegaMenu', 'MenuItem']"
         :ptTabComponent="ptComponent"
@@ -13,6 +13,7 @@
 <script>
 import AccessibilityDoc from '@/doc/megamenu/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/megamenu/BasicDoc.vue';
+import CommandDoc from '@/doc/megamenu/CommandDoc.vue';
 import ImportDoc from '@/doc/megamenu/ImportDoc.vue';
 import RouterDoc from '@/doc/megamenu/RouterDoc.vue';
 import TemplateDoc from '@/doc/megamenu/TemplateDoc.vue';
@@ -44,6 +45,11 @@ export default {
                     label: 'Template',
                     component: TemplateDoc
                 },
+                {
+                    id: 'command',
+                    label: 'Command',
+                    component: CommandDoc
+                },
                 {
                     id: 'router',
                     label: 'Router',