diff --git a/doc/tabmenu/BasicDoc.vue b/doc/tabmenu/BasicDoc.vue
index 8148b975a..153dcaf7e 100644
--- a/doc/tabmenu/BasicDoc.vue
+++ b/doc/tabmenu/BasicDoc.vue
@@ -3,17 +3,7 @@
         <p>TabMenu requires a collection of menuitems as its <i>model</i>.</p>
     </DocSectionText>
     <div class="card">
-        <TabMenu v-model:activeIndex="active" :model="items">
-            <template #item="{ label, item, props }">
-                <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
-                    <a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter.space="($event) => routerProps.navigate($event)">
-                        <span v-bind="props.icon" />
-                        <span v-bind="props.label">{{ label }}</span>
-                    </a>
-                </router-link>
-            </template>
-        </TabMenu>
-        <router-view />
+        <TabMenu :model="items" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -22,42 +12,20 @@
 export default {
     data() {
         return {
-            active: 0,
             items: [
-                { label: 'Home', icon: 'pi pi-fw pi-home', route: '/tabmenu/' },
-                { label: 'Calendar', icon: 'pi pi-fw pi-calendar', route: '/tabmenu/calendar' },
-                { label: 'Edit', icon: 'pi pi-fw pi-pencil', route: '/tabmenu/edit' },
-                { label: 'Documentation', icon: 'pi pi-fw pi-file', route: '/tabmenu/documentation' },
-                { label: 'Settings', icon: 'pi pi-fw pi-cog', route: '/tabmenu/settings' }
+                { label: 'Dashboard', icon: 'pi pi-home' },
+                { label: 'Transactions', icon: 'pi pi-chart-line' },
+                { label: 'Products', icon: 'pi pi-list' },
+                { label: 'Messages', icon: 'pi pi-inbox' }
             ],
             code: {
                 basic: `
-<TabMenu v-model:activeIndex="active" :model="items">
-    <template #item="{ label, item, props }">
-        <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
-            <a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter.space="($event) => routerProps.navigate($event)">
-                <span v-bind="props.icon" />
-                <span v-bind="props.label">{{ label }}</span>
-            </a>
-        </router-link>
-    </template>
-</TabMenu>
-<router-view />
+<TabMenu :model="items" />
 `,
                 options: `
 <template>
     <div class="card">
-        <TabMenu v-model:activeIndex="active" :model="items">
-            <template #item="{ label, item, props }">
-                <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
-                    <a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter.space="($event) => routerProps.navigate($event)">
-                        <span v-bind="props.icon" />
-                        <span v-bind="props.label">{{ label }}</span>
-                    </a>
-                </router-link>
-            </template>
-        </TabMenu>
-        <router-view />
+        <TabMenu :model="items" />
     </div>
 </template>
 
@@ -65,43 +33,13 @@ export default {
 export default {
     data() {
         return {
-            active: 0,
             items: [
-                {
-                    label: 'Home',
-                    icon: 'pi pi-fw pi-home',
-                    route: '/'
-                },
-                {
-                    label: 'Calendar',
-                    icon: 'pi pi-fw pi-calendar',
-                    route: '/calendar'
-                },
-                {
-                    label: 'Edit',
-                    icon: 'pi pi-fw pi-pencil',
-                    route: '/edit'
-                },
-                {
-                    label: 'Documentation',
-                    icon: 'pi pi-fw pi-file',
-                    route: '/documentation'
-                },
-                {
-                    label: 'Settings',
-                    icon: 'pi pi-fw pi-cog',
-                    route: '/settings'
-                }
+                { label: 'Dashboard', icon: 'pi pi-home' },
+                { label: 'Transactions', icon: 'pi pi-chart-line' },
+                { label: 'Products', icon: 'pi pi-list' },
+                { label: 'Messages', icon: 'pi pi-inbox' }
             ]
         }
-    },
-    watch: {
-        $route() {
-            this.active = this.items.findIndex((item) => this.$route.path === this.$router.resolve(item.route).path);
-        }
-    },
-    mounted() {
-        this.active = this.items.findIndex((item) => this.$route.path === this.$router.resolve(item.route).path);
     }
 }
 <\/script>
@@ -109,161 +47,23 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <TabMenu v-model:activeIndex="active" :model="items">
-            <template #item="{ label, item, props }">
-                <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
-                    <a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter.space="($event) => routerProps.navigate($event)">
-                        <span v-bind="props.icon" />
-                        <span v-bind="props.label">{{ label }}</span>
-                    </a>
-                </router-link>
-            </template>
-        </TabMenu>
-        <router-view />
+        <TabMenu :model="items" />
     </div>
 </template>
 
 <script setup>
-import { ref, onMounted, watch } from "vue";
-import { useRouter, useRoute } from "vue-router";
+import { ref } from "vue";
 
-const router = useRouter();
-const route = useRoute();
-
-const active = ref(0);
 const items = ref([
-    {
-        label: 'Home',
-        icon: 'pi pi-fw pi-home',
-        route: '/'
-    },
-    {
-        label: 'Calendar',
-        icon: 'pi pi-fw pi-calendar',
-        route: '/calendar'
-    },
-    {
-        label: 'Edit',
-        icon: 'pi pi-fw pi-pencil',
-        route: '/edit'
-    },
-    {
-        label: 'Documentation',
-        icon: 'pi pi-fw pi-file',
-        route: '/documentation'
-    },
-    {
-        label: 'Settings',
-        icon: 'pi pi-fw pi-cog',
-        route: '/settings'
-    }
+    { label: 'Dashboard', icon: 'pi pi-home' },
+    { label: 'Transactions', icon: 'pi pi-chart-line' },
+    { label: 'Products', icon: 'pi pi-list' },
+    { label: 'Messages', icon: 'pi pi-inbox' }
 ]);
-
-onMounted(() => {
-    active.value = items.value.findIndex((item) => route.path === router.resolve(item.route).path);
-})
-
-watch(
-    route,
-    () => {
-        active.value = items.value.findIndex((item) => route.path === router.resolve(item.route).path);
-    },
-    { immediate: true }
-);
-<\/script>
-`,
-                pages: [
-                    {
-                        tabName: 'HomeDemo',
-                        content: `
-<template>
-    <div class="p-4">
-        <h5>Home Component Content</h5>
-    </div>
-</template>
-
-<script>
-export default {
-
-}
 <\/script>
 `
-                    },
-                    {
-                        tabName: 'CalendarDemo',
-                        content: `
-<template>
-    <div class="p-4">
-        <h5>Calendar Component Content</h5>
-    </div>
-</template>
-
-<script>
-export default {
-
-}
-<\/script>
-`
-                    },
-                    {
-                        tabName: 'EditDemo',
-                        content: `
-<template>
-    <div class="p-4">
-        <h5>Edit Component Content</h5>
-    </div>
-</template>
-
-<script>
-export default {
-
-}
-<\/script>
-`
-                    },
-                    {
-                        tabName: 'DocumentationDemo',
-                        content: `
-<template>
-    <div class="p-4">
-        <h5>Documentation Component Content</h5>
-    </div>
-</template>
-
-<script>
-export default {
-
-}
-<\/script>
-`
-                    },
-                    {
-                        tabName: 'SettingsDemo',
-                        content: `
-<template>
-    <div class="p-4">
-        <h5>Settings Component Content</h5>
-    </div>
-</template>
-
-<script>
-export default {
-
-}
-<\/script>
-`
-                    }
-                ]
             }
         };
-    },
-    watch: {
-        $route() {
-            this.active = this.items.findIndex((item) => this.$route.path === this.$router.resolve(item.route).path);
-        }
-    },
-    mounted() {
-        this.active = this.items.findIndex((item) => this.$route.path === this.$router.resolve(item.route).path);
     }
 };
 </script>
diff --git a/doc/tabmenu/CommandDoc.vue b/doc/tabmenu/CommandDoc.vue
new file mode 100644
index 000000000..360c59d82
--- /dev/null
+++ b/doc/tabmenu/CommandDoc.vue
@@ -0,0 +1,147 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>The <i>command</i> property defines the callback to run when an item is activated by click or a key event.</p>
+    </DocSectionText>
+    <div class="card">
+        <TabMenu :model="items" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Dashboard',
+                    icon: 'pi pi-home',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Selected', detail: 'Dashboard', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Transactions',
+                    icon: 'pi pi-chart-line',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Selected', detail: 'Transactions', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Products',
+                    icon: 'pi pi-list',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Selected', detail: 'Products', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Messages',
+                    icon: 'pi pi-inbox',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Selected', detail: 'Messages', life: 3000 });
+                    }
+                }
+            ],
+            code: {
+                basic: `
+<TabMenu :model="items" />
+<Toast />
+`,
+                options: `
+<template>
+    <div class="card">
+        <TabMenu :model="items" />
+        <Toast />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Dashboard',
+                    icon: 'pi pi-home',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Selected', detail: 'Dashboard', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Transactions',
+                    icon: 'pi pi-chart-line',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Selected', detail: 'Transactions', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Products',
+                    icon: 'pi pi-list',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Selected', detail: 'Products', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Messages',
+                    icon: 'pi pi-inbox',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Selected', detail: 'Messages', life: 3000 });
+                    }
+                }
+            ]
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <TabMenu :model="items" />
+        <Toast />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useToast } from "primevue/usetoast";
+
+const toast = useToast();
+
+const items = ref([
+    {
+        label: 'Dashboard',
+        icon: 'pi pi-home',
+        command: () => {
+            toast.add({ severity: 'success', summary: 'Selected', detail: 'Dashboard', life: 3000 });
+        }
+    },
+    {
+        label: 'Transactions',
+        icon: 'pi pi-chart-line',
+        command: () => {
+            toast.add({ severity: 'success', summary: 'Selected', detail: 'Transactions', life: 3000 });
+        }
+    },
+    {
+        label: 'Products',
+        icon: 'pi pi-list',
+        command: () => {
+            toast.add({ severity: 'success', summary: 'Selected', detail: 'Products', life: 3000 });
+        }
+    },
+    {
+        label: 'Messages',
+        icon: 'pi pi-inbox',
+        command: () => {
+            toast.add({ severity: 'success', summary: 'Selected', detail: 'Messages', life: 3000 });
+        }
+    }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/tabmenu/ControlledDoc.vue b/doc/tabmenu/ControlledDoc.vue
index c18d14460..0c5ed9845 100644
--- a/doc/tabmenu/ControlledDoc.vue
+++ b/doc/tabmenu/ControlledDoc.vue
@@ -1,9 +1,14 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Visibility of the content is specified with the <i>activeIndex</i> property that supports one or two-way binding.</p>
+        <p>Tabs can be controlled programmatically using <i>activeIndex</i> property.</p>
     </DocSectionText>
     <div class="card">
-        <Button @click="active = 0" text outlined class="mb-2" label="Activate 1st" />
+        <div class="flex mb-2 gap-2 justify-content-end">
+            <Button @click="active = 0" rounded label="1" class="w-2rem h-2rem p-0" :outlined="active !== 0" />
+            <Button @click="active = 1" rounded label="2" class="w-2rem h-2rem p-0" :outlined="active !== 1" />
+            <Button @click="active = 2" rounded label="3" class="w-2rem h-2rem p-0" :outlined="active !== 2" />
+        </div>
+
         <TabMenu v-model:activeIndex="active" :model="items" />
     </div>
     <DocSectionCode :code="code" />
@@ -13,38 +18,32 @@
 export default {
     data() {
         return {
-            active: 3,
+            active: 0,
             items: [
-                {
-                    label: 'Home',
-                    icon: 'pi pi-fw pi-home'
-                },
-                {
-                    label: 'Calendar',
-                    icon: 'pi pi-fw pi-calendar'
-                },
-                {
-                    label: 'Edit',
-                    icon: 'pi pi-fw pi-pencil'
-                },
-                {
-                    label: 'Documentation',
-                    icon: 'pi pi-fw pi-file'
-                },
-                {
-                    label: 'Settings',
-                    icon: 'pi pi-fw pi-cog'
-                }
+                { label: 'Dashboard', icon: 'pi pi-home' },
+                { label: 'Transactions', icon: 'pi pi-chart-line' },
+                { label: 'Products', icon: 'pi pi-list' },
+                { label: 'Messages', icon: 'pi pi-inbox' }
             ],
             code: {
                 basic: `
-<Button @click="active = 0" text outlined label="Activate 1st" />
+<div class="flex mb-2 gap-2 justify-content-end">
+    <Button @click="active = 0" rounded label="1" class="w-2rem h-2rem p-0" :outlined="active !== 0" />
+    <Button @click="active = 1" rounded label="2" class="w-2rem h-2rem p-0" :outlined="active !== 1" />
+    <Button @click="active = 2" rounded label="3" class="w-2rem h-2rem p-0" :outlined="active !== 2" />
+</div>
+
 <TabMenu v-model:activeIndex="active" :model="items" />
 `,
                 options: `
 <template>
     <div class="card">
-        <Button @click="active = 0" text outlined label="Activate 1st" />
+        <div class="flex mb-2 gap-2 justify-content-end">
+            <Button @click="active = 0" rounded label="1" class="w-2rem h-2rem p-0" :outlined="active !== 0" />
+            <Button @click="active = 1" rounded label="2" class="w-2rem h-2rem p-0" :outlined="active !== 1" />
+            <Button @click="active = 2" rounded label="3" class="w-2rem h-2rem p-0" :outlined="active !== 2" />
+        </div>
+
         <TabMenu v-model:activeIndex="active" :model="items" />
     </div>
 </template>
@@ -53,38 +52,27 @@ export default {
 export default {
     data() {
         return {
-            active: 3,
+            active: 0,
             items: [
-                {
-                    label: 'Home',
-                    icon: 'pi pi-fw pi-home'
-                },
-                {
-                    label: 'Calendar',
-                    icon: 'pi pi-fw pi-calendar'
-                },
-                {
-                    label: 'Edit',
-                    icon: 'pi pi-fw pi-pencil'
-                },
-                {
-                    label: 'Documentation',
-                    icon: 'pi pi-fw pi-file'
-                },
-                {
-                    label: 'Settings',
-                    icon: 'pi pi-fw pi-cog'
-                }
+                { label: 'Dashboard', icon: 'pi pi-home' },
+                { label: 'Transactions', icon: 'pi pi-chart-line' },
+                { label: 'Products', icon: 'pi pi-list' },
+                { label: 'Messages', icon: 'pi pi-inbox' }
             ]
-        };
+        }
     }
-};
+}
 <\/script>
 `,
                 composition: `
 <template>
     <div class="card">
-        <Button @click="active = 0" text outlined label="Activate 1st" />
+        <div class="flex mb-2 gap-2 justify-content-end">
+            <Button @click="active.value = 0" rounded label="1" class="w-2rem h-2rem p-0" :outlined="active !== 0" />
+            <Button @click="active.value = 1" rounded label="2" class="w-2rem h-2rem p-0" :outlined="active !== 1" />
+            <Button @click="active.value = 2" rounded label="3" class="w-2rem h-2rem p-0" :outlined="active !== 2" />
+        </div>
+
         <TabMenu v-model:activeIndex="active" :model="items" />
     </div>
 </template>
@@ -92,28 +80,13 @@ export default {
 <script setup>
 import { ref } from "vue";
 
-const active = ref(3);
+const active = ref(0);
+
 const items = ref([
-    {
-        label: 'Home',
-        icon: 'pi pi-fw pi-home'
-    },
-    {
-        label: 'Calendar',
-        icon: 'pi pi-fw pi-calendar'
-    },
-    {
-        label: 'Edit',
-        icon: 'pi pi-fw pi-pencil'
-    },
-    {
-        label: 'Documentation',
-        icon: 'pi pi-fw pi-file'
-    },
-    {
-        label: 'Settings',
-        icon: 'pi pi-fw pi-cog'
-    }
+    { label: 'Dashboard', icon: 'pi pi-home' },
+    { label: 'Transactions', icon: 'pi pi-chart-line' },
+    { label: 'Products', icon: 'pi pi-list' },
+    { label: 'Messages', icon: 'pi pi-inbox' }
 ]);
 <\/script>
 `
diff --git a/doc/tabmenu/RouterDoc.vue b/doc/tabmenu/RouterDoc.vue
index e80b53550..d6d72fad1 100644
--- a/doc/tabmenu/RouterDoc.vue
+++ b/doc/tabmenu/RouterDoc.vue
@@ -1,27 +1,23 @@
 <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">
-        <TabMenu v-model:activeIndex="active" :model="items">
-            <template #item="{ label, item, props }">
-                <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
-                    <a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter.space="($event) => routerProps.navigate($event)">
+    <div class="card">
+        <TabMenu :model="items">
+            <template #item="{ item, props }">
+                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
+                    <a v-ripple :href="href" v-bind="props.action" @click="navigate">
                         <span v-bind="props.icon" />
-                        <span v-bind="props.label">{{ label }}</span>
+                        <span v-bind="props.label">{{ item.label }}</span>
                     </a>
                 </router-link>
-                <a v-else :href="item.url" :target="item.target" v-bind="props.action">
+                <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
                     <span v-bind="props.icon" />
-                    <span v-bind="props.label">{{ label }}</span>
+                    <span v-bind="props.label">{{ item.label }}</span>
                 </a>
             </template>
         </TabMenu>
-        <router-view />
-    </div> -->
+    </div>
     <DocSectionCode :code="code" />
 </template>
 
@@ -29,51 +25,25 @@
 export default {
     data() {
         return {
-            // active: 0,
-            // items: [
-            //     { label: 'Home', icon: 'pi pi-fw pi-home', route: '/tabmenu/' },
-            //     { label: 'Calendar', icon: 'pi pi-fw pi-calendar', route: '/tabmenu/calendar' },
-            //     { label: 'Edit', icon: 'pi pi-fw pi-pencil', route: '/tabmenu/edit' },
-            //     { label: 'Documentation', icon: 'pi pi-fw pi-file', route: '/tabmenu/documentation' },
-            //     { label: 'Settings', icon: 'pi pi-fw pi-cog', route: '/tabmenu/settings' },
-            //     { label: 'FileUpload', icon: 'pi pi-fw pi-upload', url: '/fileupload' }
-            // ],
+            items: [
+                { label: 'Router Link', icon: 'pi pi-home', route: '/tabmenu' },
+                {
+                    label: 'Programmatic',
+                    icon: 'pi pi-palette',
+                    command: () => {
+                        this.$router.push('/unstyled');
+                    }
+                },
+                { label: 'External', icon: 'pi pi-link', url: 'https://vuejs.org/' }
+            ],
             code: {
                 basic: `
-<TabMenu v-model:activeIndex="active" :model="items">
-    <template #item="{ label, item, props }">
-        <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
-            <a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter.space="($event) => routerProps.navigate($event)">
-                <span v-bind="props.icon" />
-                <span v-bind="props.label">{{ label }}</span>
-            </a>
-        </router-link>
-        <a v-else :href="item.url" :target="item.target" v-bind="props.action">
-            <span v-bind="props.icon" />
-            <span v-bind="props.label">{{ label }}</span>
-        </a>
-    </template>
-</TabMenu>
-<router-view />
+<TabMenu :model="items" />
 `,
                 options: `
 <template>
     <div class="card">
-        <TabMenu v-model:activeIndex="active" :model="items">
-            <template #item="{ label, item, props }">
-                <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
-                    <a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter.space="($event) => routerProps.navigate($event)">
-                        <span v-bind="props.icon" />
-                        <span v-bind="props.label">{{ label }}</span>
-                    </a>
-                </router-link>
-                <a v-else :href="item.url" :target="item.target" v-bind="props.action">
-                    <span v-bind="props.icon" />
-                    <span v-bind="props.label">{{ label }}</span>
-                </a>
-            </template>
-        </TabMenu>
-        <router-view />
+        <TabMenu :model="items" />
     </div>
 </template>
 
@@ -81,48 +51,13 @@ export default {
 export default {
     data() {
         return {
-            active: 0,
             items: [
-                {
-                    label: 'Home',
-                    icon: 'pi pi-fw pi-home',
-                    route: '/'
-                },
-                {
-                    label: 'Calendar',
-                    icon: 'pi pi-fw pi-calendar',
-                    route: '/calendar'
-                },
-                {
-                    label: 'Edit',
-                    icon: 'pi pi-fw pi-pencil',
-                    route: '/edit'
-                },
-                {
-                    label: 'Documentation',
-                    icon: 'pi pi-fw pi-file',
-                    route: '/documentation'
-                },
-                {
-                    label: 'Settings',
-                    icon: 'pi pi-fw pi-cog',
-                    route: '/settings'
-                },
-                { 
-                    label: 'FileUpload',
-                    icon: 'pi pi-fw pi-upload',
-                    url: '/fileupload'
-                }
+                { label: 'Dashboard', icon: 'pi pi-home' },
+                { label: 'Transactions', icon: 'pi pi-chart-line' },
+                { label: 'Products', icon: 'pi pi-list' },
+                { label: 'Messages', icon: 'pi pi-inbox' }
             ]
         }
-    },
-    watch: {
-        $route() {
-            this.active = this.items.findIndex((item) => this.$route.path === this.$router.resolve(item.route).path);
-        }
-    },
-    mounted() {
-        this.active = this.items.findIndex((item) => this.$route.path === this.$router.resolve(item.route).path);
     }
 }
 <\/script>
@@ -130,171 +65,23 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <TabMenu v-model:activeIndex="active" :model="items">
-            <template #item="{ label, item, props }">
-                <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
-                    <a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter.space="($event) => routerProps.navigate($event)">
-                        <span v-bind="props.icon" />
-                        <span v-bind="props.label">{{ label }}</span>
-                    </a>
-                </router-link>
-                <a v-else :href="item.url" :target="item.target" v-bind="props.action">
-                    <span v-bind="props.icon" />
-                    <span v-bind="props.label">{{ label }}</span>
-                </a>
-            </template>
-        </TabMenu>
-        <router-view />
+        <TabMenu :model="items" />
     </div>
 </template>
 
 <script setup>
-import { ref, onMounted, watch } from "vue";
-import { useRouter, useRoute } from "vue-router";
+import { ref } from "vue";
 
-const router = useRouter();
-const route = useRoute();
-
-const active = ref(0);
 const items = ref([
-    {
-        label: 'Home',
-        icon: 'pi pi-fw pi-home',
-        route: '/'
-    },
-    {
-        label: 'Calendar',
-        icon: 'pi pi-fw pi-calendar',
-        route: '/calendar'
-    },
-    {
-        label: 'Edit',
-        icon: 'pi pi-fw pi-pencil',
-        route: '/edit'
-    },
-    {
-        label: 'Documentation',
-        icon: 'pi pi-fw pi-file',
-        route: '/documentation'
-    },
-    {
-        label: 'Settings',
-        icon: 'pi pi-fw pi-cog',
-        route: '/settings'
-    },
-    { 
-        label: 'FileUpload',
-        icon: 'pi pi-fw pi-upload',
-        url: '/fileupload'
-    }
+    { label: 'Dashboard', icon: 'pi pi-home' },
+    { label: 'Transactions', icon: 'pi pi-chart-line' },
+    { label: 'Products', icon: 'pi pi-list' },
+    { label: 'Messages', icon: 'pi pi-inbox' }
 ]);
-
-onMounted(() => {
-    active.value = items.value.findIndex((item) => route.path === router.resolve(item.route).path);
-})
-
-watch(
-    route,
-    () => {
-        active.value = items.value.findIndex((item) => route.path === router.resolve(item.route).path);
-    },
-    { immediate: true }
-);
-
-<\/script>
-`,
-                pages: [
-                    {
-                        tabName: 'HomeDemo',
-                        content: `
-<template>
-    <div class="p-4">
-        <h5>Home Component Content</h5>
-    </div>
-</template>
-
-<script>
-export default {
-
-}
 <\/script>
 `
-                    },
-                    {
-                        tabName: 'CalendarDemo',
-                        content: `
-<template>
-    <div class="p-4">
-        <h5>Calendar Component Content</h5>
-    </div>
-</template>
-
-<script>
-export default {
-
-}
-<\/script>
-`
-                    },
-                    {
-                        tabName: 'EditDemo',
-                        content: `
-<template>
-    <div class="p-4">
-        <h5>Edit Component Content</h5>
-    </div>
-</template>
-
-<script>
-export default {
-
-}
-<\/script>
-`
-                    },
-                    {
-                        tabName: 'DocumentationDemo',
-                        content: `
-<template>
-    <div class="p-4">
-        <h5>Documentation Component Content</h5>
-    </div>
-</template>
-
-<script>
-export default {
-
-}
-<\/script>
-`
-                    },
-                    {
-                        tabName: 'SettingsDemo',
-                        content: `
-<template>
-    <div class="p-4">
-        <h5>Settings Component Content</h5>
-    </div>
-</template>
-
-<script>
-export default {
-
-}
-<\/script>
-`
-                    }
-                ]
             }
         };
     }
-    // watch: {
-    //     $route() {
-    //         this.active = this.items.findIndex((item) => this.$route.path === this.$router.resolve(item.route).path);
-    //     }
-    // },
-    // mounted() {
-    //     this.active = this.items.findIndex((item) => this.$route.path === this.$router.resolve(item.route).path);
-    // }
 };
 </script>
diff --git a/doc/tabmenu/TemplateDoc.vue b/doc/tabmenu/TemplateDoc.vue
new file mode 100644
index 000000000..06e060e9b
--- /dev/null
+++ b/doc/tabmenu/TemplateDoc.vue
@@ -0,0 +1,94 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>TabMenu offers item customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
+    </DocSectionText>
+    <div class="card">
+        <TabMenu :model="items">
+            <template #item="{ item, props }">
+                <a v-ripple v-bind="props.action" class="flex align-items-center gap-2">
+                    <img :alt="item.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${item.image}`" style="width: 32px" />
+                    <span class="font-bold">{{ item.name }}</span>
+                </a>
+            </template>
+        </TabMenu>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                { name: 'Amy Elsner', image: 'amyelsner.png' },
+                { name: 'Anna Fali', image: 'annafali.png' },
+                { name: 'Asiya Javayant', image: 'asiyajavayant.png' }
+            ],
+            code: {
+                basic: `
+<TabMenu :model="items">
+    <template #item="{ item, props }">
+        <a v-ripple v-bind="props.action" class="flex align-items-center gap-2">
+            <img :alt="item.name" :src="\`/images/avatar/\${item.image}\`" style="width: 32px" />
+            <span class="font-bold">{{ item.name }}</span>
+        </a>
+    </template>
+</TabMenu>
+`,
+                options: `
+<template>
+    <div class="card">
+        <TabMenu :model="items">
+            <template #item="{ item, props }">
+                <a v-ripple v-bind="props.action" class="flex align-items-center gap-2">
+                    <img :alt="item.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${item.image}\`" style="width: 32px" />
+                    <span class="font-bold">{{ item.name }}</span>
+                </a>
+            </template>
+        </TabMenu>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                { name: 'Amy Elsner', image: 'amyelsner.png' },
+                { name: 'Anna Fali', image: 'annafali.png' },
+                { name: 'Asiya Javayant', image: 'asiyajavayant.png' }
+            ]
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <TabMenu :model="items">
+            <template #item="{ item, props }">
+                <a v-ripple v-bind="props.action" class="flex align-items-center gap-2">
+                    <img :alt="item.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${item.image}\`" style="width: 32px" />
+                    <span class="font-bold">{{ item.name }}</span>
+                </a>
+            </template>
+        </TabMenu>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const items = ref([
+    { name: 'Amy Elsner', image: 'amyelsner.png' },
+    { name: 'Anna Fali', image: 'annafali.png' },
+    { name: 'Asiya Javayant', image: 'asiyajavayant.png' }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/pages/tabmenu.vue b/pages/tabmenu.vue
deleted file mode 100755
index 94f529e0e..000000000
--- a/pages/tabmenu.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
-    <DocComponent
-        title="Vue TabMenu Component"
-        header="TabMenu"
-        description="TabMenu is a navigation/command component that displays items as tab headers."
-        :componentDocs="docs"
-        :apiDocs="['TabMenu', 'MenuItem']"
-        :ptTabComponent="ptComponent"
-        :themingDocs="themingDoc"
-    />
-</template>
-
-<script>
-import PTComponent from '@/doc/tabmenu/pt/index.vue';
-import ThemingDoc from '@/doc/tabmenu/theming/index.vue';
-import AccessibilityDoc from '../doc/tabmenu/AccessibilityDoc.vue';
-import BasicDoc from '../doc/tabmenu/BasicDoc.vue';
-import ControlledDoc from '../doc/tabmenu/ControlledDoc.vue';
-import ImportDoc from '../doc/tabmenu/ImportDoc.vue';
-import RouterDoc from '../doc/tabmenu/RouterDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'controlled',
-                    label: 'Controlled',
-                    component: ControlledDoc
-                },
-                {
-                    id: 'router',
-                    label: 'Router',
-                    component: RouterDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            ptComponent: PTComponent,
-            themingDoc: ThemingDoc
-        };
-    }
-};
-</script>
diff --git a/pages/tabmenu/Calendar.vue b/pages/tabmenu/Calendar.vue
deleted file mode 100755
index 66e22b018..000000000
--- a/pages/tabmenu/Calendar.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-    <div class="p-4">
-        <h3>Calendar Component Content</h3>
-    </div>
-</template>
-
-<script>
-export default {};
-</script>
diff --git a/pages/tabmenu/Documentation.vue b/pages/tabmenu/Documentation.vue
deleted file mode 100755
index 92ce7b82d..000000000
--- a/pages/tabmenu/Documentation.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-    <div class="p-4">
-        <h3>Documentation Component Content</h3>
-    </div>
-</template>
-
-<script>
-export default {};
-</script>
diff --git a/pages/tabmenu/Edit.vue b/pages/tabmenu/Edit.vue
deleted file mode 100755
index 1dd70c31f..000000000
--- a/pages/tabmenu/Edit.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-    <div class="p-4">
-        <h3>Edit Component Content</h3>
-    </div>
-</template>
-
-<script>
-export default {};
-</script>
diff --git a/pages/tabmenu/Settings.vue b/pages/tabmenu/Settings.vue
deleted file mode 100755
index b0c6d8ae4..000000000
--- a/pages/tabmenu/Settings.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-    <div class="p-4">
-        <h3>Settings Component Content</h3>
-    </div>
-</template>
-
-<script>
-export default {};
-</script>
diff --git a/pages/tabmenu/index.vue b/pages/tabmenu/index.vue
index 467345483..3676b0fe6 100755
--- a/pages/tabmenu/index.vue
+++ b/pages/tabmenu/index.vue
@@ -1,9 +1,69 @@
 <template>
-    <div class="p-4">
-        <h3>Home Component Content</h3>
-    </div>
+    <DocComponent
+        title="Vue TabMenu Component"
+        header="TabMenu"
+        description="TabMenu is a navigation component displaying menu items as tabs."
+        :componentDocs="docs"
+        :apiDocs="['TabMenu', 'MenuItem']"
+        :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
+    />
 </template>
 
 <script>
-export default {};
+import AccessibilityDoc from '@/doc/tabmenu/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/tabmenu/BasicDoc.vue';
+import ControlledDoc from '@/doc/tabmenu/ControlledDoc.vue';
+import ImportDoc from '@/doc/tabmenu/ImportDoc.vue';
+import RouterDoc from '@/doc/tabmenu/RouterDoc.vue';
+import CommandDoc from '@/doc/tabmenu/CommandDoc.vue';
+import TemplateDoc from '@/doc/tabmenu/TemplateDoc.vue';
+import PTComponent from '@/doc/tabmenu/pt/index.vue';
+import ThemingDoc from '@/doc/tabmenu/theming/index.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'controlled',
+                    label: 'Controlled',
+                    component: ControlledDoc
+                },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
+                {
+                    id: 'command',
+                    label: 'Command',
+                    component: CommandDoc
+                },
+                {
+                    id: 'router',
+                    label: 'Router',
+                    component: RouterDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
+        };
+    }
+};
 </script>