diff --git a/assets/menu/menu.json b/assets/menu/menu.json
index d8601c17d..784d9c28e 100644
--- a/assets/menu/menu.json
+++ b/assets/menu/menu.json
@@ -369,10 +369,6 @@
                             "name": "Steps",
                             "to": "/steps"
                         },
-                        {
-                            "name": "TabMenu",
-                            "to": "/tabmenu"
-                        },
                         {
                             "name": "TieredMenu",
                             "to": "/tieredmenu"
diff --git a/doc/tabs/TabMenuDoc.vue b/doc/tabs/TabMenuDoc.vue
new file mode 100644
index 000000000..5f43170c9
--- /dev/null
+++ b/doc/tabs/TabMenuDoc.vue
@@ -0,0 +1,106 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            A navigation menu is implemented using tabs without the panels where the content of a tab is provided by a route component like
+            <a href="https://router.vuejs.org/guide/essentials/nested-routes#Nested-Named-Routes" target="_blank" rel="noopener noreferrer">router-view</a>. For the purpose of this demo, <i>router-view</i> is not included.
+        </p>
+    </DocSectionText>
+    <div class="card">
+        <Tabs value="/dashboard">
+            <TabList>
+                <Tab v-for="tab in items" :key="tab.label" :value="tab.route" as="div" class="flex items-center gap-2">
+                    <i :class="tab.icon" />
+                    <span>{{ tab.label }}</span>
+                </Tab>
+            </TabList>
+        </Tabs>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                { route: '/dashboard', label: 'Dashboard', icon: 'pi pi-home' },
+                { route: '/transactions', label: 'Transactions', icon: 'pi pi-chart-line' },
+                { route: '/products', label: 'Products', icon: 'pi pi-list' },
+                { route: '/messages', label: 'Messages', icon: 'pi pi-inbox' }
+            ],
+            code: {
+                basic: `
+<TabList>
+    <Tab v-for="tab in items" :key="tab.label" :value="tab.route">
+        <router-link v-if="tab.route" v-slot="{ href, navigate }" :to="tab.route" custom>
+            <a v-ripple :href="href" @click="navigate" class="flex items-center gap-2 text-inherit">
+                <i :class="tab.icon" />
+                <span>{{ tab.label }}</span>
+            </a>
+        </router-link>
+    </Tab>
+</TabList>
+`,
+                options: `
+<template>
+    <div class="card">
+        <TabList>
+            <Tab v-for="tab in items" :key="tab.label" :value="tab.route">
+                <router-link v-if="tab.route" v-slot="{ href, navigate }" :to="tab.route" custom>
+                    <a v-ripple :href="href" @click="navigate" class="flex items-center gap-2 text-inherit">
+                        <i :class="tab.icon" />
+                        <span>{{ tab.label }}</span>
+                    </a>
+                </router-link>
+            </Tab>
+        </TabList>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                { route: '/dashboard', label: 'Dashboard', icon: 'pi pi-home' },
+                { route: '/transactions', label: 'Transactions', icon: 'pi pi-chart-line' },
+                { route: '/products', label: 'Products', icon: 'pi pi-list' },
+                { route: '/messages', label: 'Messages', icon: 'pi pi-inbox' }
+            ]
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <TabList>
+            <Tab v-for="tab in items" :key="tab.label" :value="tab.route">
+                <router-link v-if="tab.route" v-slot="{ href, navigate }" :to="tab.route" custom>
+                    <a v-ripple :href="href" @click="navigate" class="flex items-center gap-2 text-inherit">
+                        <i :class="tab.icon" />
+                        <span>{{ tab.label }}</span>
+                    </a>
+                </router-link>
+            </Tab>
+        </TabList>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const items = ref([
+    { route: '/dashboard', label: 'Dashboard', icon: 'pi pi-home' },
+    { route: '/transactions', label: 'Transactions', icon: 'pi pi-chart-line' },
+    { route: '/products', label: 'Products', icon: 'pi pi-list' },
+    { route: '/messages', label: 'Messages', icon: 'pi pi-inbox' }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/pages/tabs/index.vue b/pages/tabs/index.vue
index bd5ae18ae..accdd8de9 100755
--- a/pages/tabs/index.vue
+++ b/pages/tabs/index.vue
@@ -18,6 +18,7 @@ import DisabledDoc from '@/doc/tabs/DisabledDoc.vue';
 import DynamicDoc from '@/doc/tabs/DynamicDoc.vue';
 import ImportDoc from '@/doc/tabs/ImportDoc.vue';
 import ScrollableDoc from '@/doc/tabs/ScrollableDoc.vue';
+import TabMenuDoc from '@/doc/tabs/TabMenuDoc.vue';
 import TemplateDoc from '@/doc/tabs/TemplateDoc.vue';
 import PTComponent from '@/doc/tabs/pt/index.vue';
 import ThemingDoc from '@/doc/tabs/theming/index.vue';
@@ -61,6 +62,11 @@ export default {
                     label: 'Template',
                     component: TemplateDoc
                 },
+                {
+                    id: 'tabmenu',
+                    label: 'TabMenu',
+                    component: TabMenuDoc
+                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',