diff --git a/api-generator/components/dock.js b/api-generator/components/dock.js
index 7fd3997a2..3920dba71 100644
--- a/api-generator/components/dock.js
+++ b/api-generator/components/dock.js
@@ -28,6 +28,12 @@ const DockProps = [
         type: "boolean",
         default: "true",
         description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path."
+    },
+    {
+        name: "tooltipOptions",
+        type: "object",
+        default: "null",
+        description: "Whether to display the tooltip on items. The modifiers of tooltip can be used like an object in it. Valid keys are 'event' and 'position'."
     }
 ];
 
@@ -45,4 +51,4 @@ module.exports = {
         props: DockProps,
         slots: DockSlots
     }
-}
\ No newline at end of file
+}
diff --git a/api-generator/components/image.js b/api-generator/components/image.js
index 80c588b4e..b7643278f 100644
--- a/api-generator/components/image.js
+++ b/api-generator/components/image.js
@@ -22,7 +22,7 @@ const ImageSlots = [
     {
         name: "indicator",
         description: "Custom content for the preview indicator"
-    }-
+    }
 ];
 
 module.exports = {
diff --git a/api-generator/components/speeddial.js b/api-generator/components/speeddial.js
index ffa68dbdf..21b21112f 100644
--- a/api-generator/components/speeddial.js
+++ b/api-generator/components/speeddial.js
@@ -100,6 +100,12 @@ const SpeedDialProps = [
         type: "any",
         default: "null",
         description: "Style class of the element."
+    },
+    {
+        name: "tooltipOptions",
+        type: "object",
+        default: "null",
+        description: "Whether to display the tooltip on items. The modifiers of tooltip can be used like an object in it. Valid keys are 'event' and 'position'."
     }
 ];
 
@@ -144,4 +150,4 @@ module.exports = {
         events: SpeedDialEvents,
         slots: SpeedDialSlots
     }
-}
\ No newline at end of file
+}
diff --git a/api-generator/components/tabmenu.js b/api-generator/components/tabmenu.js
index 8ac64f24a..de136a868 100644
--- a/api-generator/components/tabmenu.js
+++ b/api-generator/components/tabmenu.js
@@ -10,6 +10,31 @@ const TabMenuProps = [
         type: "boolean",
         default: "true",
         description: "Defines if active route highlight should match the exact route path."
+    },
+    {
+        name: "activeIndex",
+        type: "number",
+        default: "0",
+        description: "Active index of menuitem."
+    }
+];
+
+const TabMenuEvents = [
+    {
+        name: "tab-change",
+        description: "Callback to invoke when an active tab is changed.",
+        arguments: [
+            {
+                name: "event.originalEvent",
+                type: "object",
+                description: "Original event"
+            },
+            {
+                name: "event.index",
+                type: "number",
+                description: "Index of the selected tab"
+            }
+        ]
     }
 ];
 
@@ -25,6 +50,7 @@ module.exports = {
         name: "TabMenu",
         description: "TabMenu is a navigation component that displays items as tab headers.",
         props: TabMenuProps,
+        events: TabMenuEvents,
         slots: TabMenuSlots
     }
 };
diff --git a/api-generator/components/virtualscroller.js b/api-generator/components/virtualscroller.js
index e454f8b89..75afb734e 100644
--- a/api-generator/components/virtualscroller.js
+++ b/api-generator/components/virtualscroller.js
@@ -110,7 +110,7 @@ const VirtualScrollerSlots = [
     {
         name: "content",
         description: "Custom content for the component"
-    }
+    },
     {
         name: "loader",
         description: "Custom content for the loader items"
diff --git a/src/components/datatable/BodyCell.vue b/src/components/datatable/BodyCell.vue
index 408c702fa..38da1f558 100755
--- a/src/components/datatable/BodyCell.vue
+++ b/src/components/datatable/BodyCell.vue
@@ -312,7 +312,7 @@ export default {
                     let right = 0;
                     let next = this.$el.nextElementSibling;
                     if (next) {
-                        right = DomHandler.getOuterWidth(next) + parseFloat(next.style.left);
+                        right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
                     }
                     this.styleObject.right = right + 'px';
                 }
@@ -320,7 +320,7 @@ export default {
                     let left = 0;
                     let prev = this.$el.previousElementSibling;
                     if (prev) {
-                        left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left);
+                        left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
                     }
                     this.styleObject.left = left + 'px';
                 }
diff --git a/src/components/datatable/HeaderCell.vue b/src/components/datatable/HeaderCell.vue
index c15c73f40..4233a6b77 100644
--- a/src/components/datatable/HeaderCell.vue
+++ b/src/components/datatable/HeaderCell.vue
@@ -156,7 +156,7 @@ export default {
                     let right = 0;
                     let next = this.$el.nextElementSibling;
                     if (next) {
-                        right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right);
+                        right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
                     }
                     this.styleObject.right = right + 'px';
                 }
@@ -164,7 +164,7 @@ export default {
                     let left = 0;
                     let prev = this.$el.previousElementSibling;
                     if (prev) {
-                        left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left);
+                        left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
                     }
                     this.styleObject.left = left + 'px';
                 }
diff --git a/src/components/dock/Dock.d.ts b/src/components/dock/Dock.d.ts
index 908876ca6..9ea7619bd 100644
--- a/src/components/dock/Dock.d.ts
+++ b/src/components/dock/Dock.d.ts
@@ -6,6 +6,7 @@ interface DockProps {
     class?: string;
     style?: any;
     exact?: boolean;
+    tooltipOptions?: any;
 }
 
 declare class Dock {
diff --git a/src/components/dock/Dock.vue b/src/components/dock/Dock.vue
index eaf85871a..29a96a110 100644
--- a/src/components/dock/Dock.vue
+++ b/src/components/dock/Dock.vue
@@ -1,6 +1,6 @@
 <template>
     <div :class="containerClass" :style="style">
-        <DockSub :model="model" :template="$slots.item" :exact="exact"></DockSub>
+        <DockSub :model="model" :template="$slots.item" :exact="exact" :tooltipOptions="tooltipOptions"></DockSub>
     </div>
 </template>
 
@@ -17,6 +17,7 @@ export default {
         model: null,
         class: null,
         style: null,
+        tooltipOptions: null,
         exact: {
             type: Boolean,
             default: true
diff --git a/src/components/dock/DockSub.vue b/src/components/dock/DockSub.vue
index 2067794b4..8fe03717f 100644
--- a/src/components/dock/DockSub.vue
+++ b/src/components/dock/DockSub.vue
@@ -5,7 +5,7 @@
                 <template v-if="!template">
                     <router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{navigate, href, isActive, isExactActive}">
                         <a :href="href" role="menuitem" :class="linkClass(item, {isActive, isExactActive})" :target="item.target"
-                            :data-pr-tooltip="item.label" @click="onItemClick($event, item, navigate)">
+                            v-tooltip:[tooltipOptions]="{value: item.label, disabled: !tooltipOptions}" @click="onItemClick($event, item, navigate)">
                             <template v-if="typeof item.icon === 'string'">
                                 <span :class="['p-dock-action-icon', item.icon]" v-ripple></span>
                             </template>
@@ -13,7 +13,7 @@
                         </a>
                     </router-link>
                     <a v-else :href="item.url" role="menuitem" :class="linkClass(item)" :target="item.target"
-                        :data-pr-tooltip="item.label" @click="onItemClick($event, item)" :tabindex="disabled(item) ? null : '0'">
+                        v-tooltip:[tooltipOptions]="{value: item.label, disabled: !tooltipOptions}" @click="onItemClick($event, item)" :tabindex="disabled(item) ? null : '0'">
                         <template v-if="typeof item.icon === 'string'">
                             <span :class="['p-dock-action-icon', item.icon]" v-ripple></span>
                         </template>
@@ -41,7 +41,8 @@ export default {
         exact: {
             type: Boolean,
             default: true
-        }
+        },
+        tooltipOptions: null
     },
     data() {
         return {
diff --git a/src/components/speeddial/SpeedDial.d.ts b/src/components/speeddial/SpeedDial.d.ts
index 2b9fa64f0..1ef430b85 100644
--- a/src/components/speeddial/SpeedDial.d.ts
+++ b/src/components/speeddial/SpeedDial.d.ts
@@ -18,6 +18,7 @@ interface SpeedDialProps {
     rotateAnimation?: boolean;
     class?: string;
     style?: any;
+    tooltipOptions?: any;
 }
 
 declare class SpeedDial {
diff --git a/src/components/speeddial/SpeedDial.vue b/src/components/speeddial/SpeedDial.vue
index d64d9f10e..f2bdb40d0 100644
--- a/src/components/speeddial/SpeedDial.vue
+++ b/src/components/speeddial/SpeedDial.vue
@@ -6,8 +6,8 @@
         <ul :ref="listRef" class="p-speeddial-list" role="menu">
             <li v-for="(item, index) of model" :key="index" class="p-speeddial-item" :style="getItemStyle(index)" role="none">
                 <template v-if="!$slots.item">
-                    <a :href="item.url || '#'" role="menuitem" :class="['p-speeddial-action', { 'p-disabled': item.disabled }]" :target="item.target" 
-                        :data-pr-tooltip="item.label" @click="onItemClick($event, item)" v-ripple>
+                    <a :href="item.url || '#'" role="menuitem" :class="['p-speeddial-action', { 'p-disabled': item.disabled }]" :target="item.target"
+                        v-tooltip:[tooltipOptions]="{value: item.label, disabled: !tooltipOptions}" @click="onItemClick($event, item)" v-ripple>
                         <span v-if="item.icon" :class="['p-speeddial-action-icon', item.icon]"></span>
                     </a>
                 </template>
@@ -73,6 +73,7 @@ export default {
             type: Boolean,
             default: true
         },
+        tooltipOptions: null,
         style: null,
         class: null
     },
@@ -375,4 +376,4 @@ export default {
 .p-speeddial-direction-right .p-speeddial-list {
     flex-direction: row;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/tabmenu/TabMenu.d.ts b/src/components/tabmenu/TabMenu.d.ts
index 31942d9c7..a33d7aaa5 100755
--- a/src/components/tabmenu/TabMenu.d.ts
+++ b/src/components/tabmenu/TabMenu.d.ts
@@ -3,6 +3,7 @@ import { VNode } from 'vue';
 interface TabMenuProps {
     model?: any[];
     exact?: boolean;
+    activeIndex?: number;
 }
 
 declare class TabMenu {
diff --git a/src/components/tabmenu/TabMenu.vue b/src/components/tabmenu/TabMenu.vue
index 340ca35fa..fbc7c4f01 100755
--- a/src/components/tabmenu/TabMenu.vue
+++ b/src/components/tabmenu/TabMenu.vue
@@ -5,7 +5,7 @@
                 <router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{navigate, href, isActive, isExactActive}">
                     <li :class="getRouteItemClass(item,isActive,isExactActive)" :style="item.style" v-if="visible(item)" role="tab">
                         <template v-if="!$slots.item">
-                            <a :href="href" class="p-menuitem-link" @click="onItemClick($event, item, navigate)" role="presentation" v-ripple>
+                            <a :href="href" class="p-menuitem-link" @click="onItemClick($event, item, i, navigate)" role="presentation" v-ripple>
                                 <span :class="getItemIcon(item)" v-if="item.icon"></span>
                                 <span class="p-menuitem-text">{{item.label}}</span>
                             </a>
@@ -13,9 +13,9 @@
                         <component v-else :is="$slots.item" :item="item"></component>
                     </li>
                 </router-link>
-                <li v-else-if="visible(item)" :class="getItemClass(item)" role="tab">
+                <li v-else-if="visible(item)" :class="getItemClass(item, i)" role="tab">
                     <template v-if="!$slots.item">
-                        <a :href="item.url" class="p-menuitem-link" :target="item.target" @click="onItemClick($event, item)" role="presentation" :tabindex="disabled(item) ? null : '0'" v-ripple>
+                        <a :href="item.url" class="p-menuitem-link" :target="item.target" @click="onItemClick($event, item, i)" role="presentation" :tabindex="disabled(item) ? null : '0'" v-ripple>
                             <span :class="getItemIcon(item)" v-if="item.icon"></span>
                             <span class="p-menuitem-text">{{item.label}}</span>
                         </a>
@@ -34,6 +34,7 @@ import Ripple from 'primevue/ripple';
 
 export default {
     name: 'TabMenu',
+    emits: ['update:activeIndex', 'tab-change'],
     props: {
 		model: {
             type: Array,
@@ -42,9 +43,18 @@ export default {
         exact: {
             type: Boolean,
             default: true
+        },
+        activeIndex: {
+            type: Number,
+            default: 0
         }
     },
     timeout: null,
+    data() {
+        return {
+            d_activeIndex: this.activeIndex
+        }
+    },
     mounted() {
         this.updateInkBar();
     },
@@ -57,10 +67,13 @@ export default {
     watch: {
         $route() {
             this.timeout = setTimeout(() => this.updateInkBar(), 50);
+        },
+        activeIndex(newValue) {
+            this.d_activeIndex = newValue;
         }
     },
     methods: {
-        onItemClick(event, item, navigate) {
+        onItemClick(event, item, index, navigate) {
             if (this.disabled(item)) {
                 event.preventDefault();
                 return;
@@ -76,9 +89,20 @@ export default {
             if (item.to && navigate) {
                 navigate(event);
             }
+
+            if (index !== this.d_activeIndex) {
+                this.d_activeIndex = index;
+                this.$emit('update:activeIndex', this.d_activeIndex);
+            }
+
+            this.$emit('tab-change', {
+                originalEvent: event,
+                index: index
+            });
         },
-        getItemClass(item) {
+        getItemClass(item, index) {
             return ['p-tabmenuitem', item.class, {
+                'p-highlight': this.d_activeIndex === index,
                 'p-disabled': this.disabled(item)
             }];
         },
diff --git a/src/components/tooltip/Tooltip.js b/src/components/tooltip/Tooltip.js
index 5eabdf6cb..8ffa424db 100755
--- a/src/components/tooltip/Tooltip.js
+++ b/src/components/tooltip/Tooltip.js
@@ -241,10 +241,27 @@ function getTarget(el) {
     return DomHandler.hasClass(el, 'p-inputwrapper') ? DomHandler.findSingle(el, 'input'): el;
 }
 
+function getModifiers(options) {
+    // modifiers
+    if (options.modifiers && Object.keys(options.modifiers).length) {
+        return options.modifiers;
+    }
+
+    // arg
+    if (options.arg && typeof options.arg === 'object') {
+        return Object.entries(options.arg).reduce((acc, [key, val]) => {
+            if (key === 'event' || key === 'position') acc[val] = true;
+            return acc;
+        }, {});
+    }
+
+    return {};
+}
+
 const Tooltip = {
     beforeMount(el, options) {
         let target = getTarget(el);
-        target.$_ptooltipModifiers = options.modifiers;
+        target.$_ptooltipModifiers = getModifiers(options);
         if (typeof options.value === 'string') {
             target.$_ptooltipValue = options.value;
             target.$_ptooltipDisabled = false;
@@ -271,7 +288,7 @@ const Tooltip = {
     },
     updated(el, options) {
         let target = getTarget(el);
-        target.$_ptooltipModifiers = options.modifiers;
+        target.$_ptooltipModifiers = getModifiers(options);
 
         if (typeof options.value === 'string') {
             target.$_ptooltipValue = options.value;
@@ -281,8 +298,7 @@ const Tooltip = {
             target.$_ptooltipValue = options.value.value;
             target.$_ptooltipDisabled = options.value.disabled;
         }
-    },
-
+    }
 };
 
 export default Tooltip;
diff --git a/src/views/dock/DockDoc.vue b/src/views/dock/DockDoc.vue
index 2878d907e..5fc5988b8 100644
--- a/src/views/dock/DockDoc.vue
+++ b/src/views/dock/DockDoc.vue
@@ -89,6 +89,12 @@ import Dock from 'primevue/dock';
                     <td>true</td>
                     <td>Whether to apply 'router-link-active-exact' class if route exactly matches the item path.</td>
                 </tr>
+                <tr>
+                    <td>tooltipOptions</td>
+                    <td>object</td>
+                    <td>null</td>
+                    <td>Whether to display the tooltip on items. The modifiers of <router-link to="/tooltip">Tooltip</router-link> can be used like an object in it. Valid keys are 'event' and 'position'.</td>
+                </tr>
             </tbody>
         </table>
     </div>
@@ -201,7 +207,7 @@ export default {
                     :circular="true" :fullScreen="true" :showThumbnails="false" :showItemNavigators="true">
                     <template #item="slotProps">
                         <img src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png' :alt="slotProps.item.alt" style="width: 100%" />
-                    </template>    
+                    </template>
                 </Galleria>
             </div>
         </div>
@@ -584,7 +590,7 @@ export default {
                     :circular="true" :fullScreen="true" :showThumbnails="false" :showItemNavigators="true">
                     <template #item="slotProps">
                         <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.item.alt" style="width: 100%" />
-                    </template>    
+                    </template>
                 </Galleria>
             </div>
         </div>
@@ -946,11 +952,11 @@ export default {
         }
     }
 }
-</style>                    
+</style>
 `
                 }
             }
         }
     }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/setup/Setup.vue b/src/views/setup/Setup.vue
index 48e60c3d3..bf3a7983b 100755
--- a/src/views/setup/Setup.vue
+++ b/src/views/setup/Setup.vue
@@ -98,7 +98,7 @@ import Dialog from 'primevue/dialog/sfc';
                 },
                 components: {
                     'p-inputtext': primevue.inputtext
-                } 
+                }
             };
 
             createApp(App).mount("#app");
@@ -218,7 +218,7 @@ app.use(PrimeVue, {ripple: true});
 
             <h5>Outlined vs Filled Input Styles</h5>
             <p>Input fields come in two styles, default is <i>outlined</i> with borders around the field whereas <i>filled</i> alternative adds a background color
-            to the field. Applying <i>p-input-filled</i> to an ancestor of an input enables the filled style. If you prefer to use filled inputs in the entire application, 
+            to the field. Applying <i>p-input-filled</i> to an ancestor of an input enables the filled style. If you prefer to use filled inputs in the entire application,
             use a global container such as the document body or the application element to apply the style class. Note that in case you add it to the application element, components that are teleported to the document body such as Dialog
             will not be able to display filled inputs as they are not a descendant of the application root element in the DOM tree, to resolve this case set inputStyle to 'filled' at PrimeVue configuration as well.</p>
 
@@ -269,7 +269,7 @@ app.use(PrimeVue, {
                             <th>
                                 <div class="p-d-flex p-ai-center">
                                     <img src="../../assets/images//browsers/edge.svg" alt="edge" style="width: 1.5rem;" class="p-mr-2">
-                                    IE / Edge
+                                    Edge
                                 </div>
                             </th>
                             <th>
@@ -300,7 +300,7 @@ app.use(PrimeVue, {
                     </thead>
                     <tbody>
                         <tr>
-                            <td>IE11, Edge</td>
+                            <td>Edge</td>
                             <td>Last 2 versions</td>
                             <td>Last 2 versions</td>
                             <td>Last 2 versions</td>
@@ -311,4 +311,4 @@ app.use(PrimeVue, {
             </div>
         </div>
     </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/views/speeddial/SpeedDialDemo.vue b/src/views/speeddial/SpeedDialDemo.vue
index 884c343a7..6bb1a3aa7 100644
--- a/src/views/speeddial/SpeedDialDemo.vue
+++ b/src/views/speeddial/SpeedDialDemo.vue
@@ -15,7 +15,7 @@
                     <SpeedDial :model="items" direction="up" />
                     <SpeedDial :model="items" direction="down" />
                     <SpeedDial :model="items" direction="left" />
-                    <SpeedDial :model="items" direction="right" /> 
+                    <SpeedDial :model="items" direction="right" />
                 </div>
             </div>
 
@@ -37,9 +37,9 @@
             <div class="card">
                 <h5>Tooltip</h5>
                 <div class="speeddial-tooltip-demo" :style="{ position: 'relative', height: '350px' }">
-                    <SpeedDial :model="items" direction="up" class="speeddial-right" buttonClassName="p-button-danger" />
+                    <SpeedDial :model="items" direction="up" class="speeddial-right" buttonClassName="p-button-danger" :tooltipOptions="{position: 'left'}" />
 
-                    <SpeedDial :model="items" direction="up" class="speeddial-left" buttonClassName="p-button-help" />
+                    <SpeedDial :model="items" direction="up" class="speeddial-left" buttonClassName="p-button-help" :tooltipOptions="{position: 'right'}" />
                 </div>
             </div>
 
@@ -214,4 +214,4 @@ export default {
         bottom: 0;
     }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/speeddial/SpeedDialDoc.vue b/src/views/speeddial/SpeedDialDoc.vue
index f19c1d4d1..b1cd40920 100644
--- a/src/views/speeddial/SpeedDialDoc.vue
+++ b/src/views/speeddial/SpeedDialDoc.vue
@@ -52,7 +52,7 @@ items: [
             window.location.href = 'https://vuejs.org/'
         }
     }
-] 
+]
 </code></pre>
 
         <h5>MenuModel API</h5>
@@ -179,6 +179,12 @@ items: [
                         <td>null</td>
                         <td>Inline style of the element.</td>
                     </tr>
+                    <tr>
+                        <td>tooltipOptions</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Whether to display the tooltip on items. The modifiers of <router-link to="/tooltip">Tooltip</router-link> can be used like an object in it. Valid keys are 'event' and 'position'.</td>
+                    </tr>
                 </tbody>
             </table>
         </div>
@@ -291,7 +297,7 @@ export default {
                 <SpeedDial :model="items" direction="up" />
                 <SpeedDial :model="items" direction="down" />
                 <SpeedDial :model="items" direction="left" />
-                <SpeedDial :model="items" direction="right" /> 
+                <SpeedDial :model="items" direction="right" />
             </div>
         </div>
 
@@ -313,9 +319,9 @@ export default {
         <div class="card">
             <h5>Tooltip</h5>
             <div class="speeddial-tooltip-demo" :style="{ position: 'relative', height: '350px' }">
-                <SpeedDial :model="items" direction="up" class="speeddial-right" buttonClassName="p-button-danger" />
+                <SpeedDial :model="items" direction="up" class="speeddial-right" buttonClassName="p-button-danger" :tooltipOptions="{position: 'left'}" />
 
-                <SpeedDial :model="items" direction="up" class="speeddial-left" buttonClassName="p-button-help" />
+                <SpeedDial :model="items" direction="up" class="speeddial-left" buttonClassName="p-button-help" :tooltipOptions="{position: 'right'}" />
             </div>
         </div>
 
@@ -502,7 +508,7 @@ export default {
                 <SpeedDial :model="items" direction="up" />
                 <SpeedDial :model="items" direction="down" />
                 <SpeedDial :model="items" direction="left" />
-                <SpeedDial :model="items" direction="right" /> 
+                <SpeedDial :model="items" direction="right" />
             </div>
         </div>
 
@@ -524,9 +530,9 @@ export default {
         <div class="card">
             <h5>Tooltip</h5>
             <div class="speeddial-tooltip-demo" :style="{ position: 'relative', height: '350px' }">
-                <SpeedDial :model="items" direction="up" class="speeddial-right" buttonClassName="p-button-danger" />
+                <SpeedDial :model="items" direction="up" class="speeddial-right" buttonClassName="p-button-danger" :tooltipOptions="{position: 'left'}" />
 
-                <SpeedDial :model="items" direction="up" class="speeddial-left" buttonClassName="p-button-help" />
+                <SpeedDial :model="items" direction="up" class="speeddial-left" buttonClassName="p-button-help" :tooltipOptions="{position: 'right'}" />
             </div>
         </div>
 
@@ -701,4 +707,4 @@ export default {
         }
     }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/steps/SeatDemo.vue b/src/views/steps/SeatDemo.vue
index 3d7573d7e..30e0cdb13 100755
--- a/src/views/steps/SeatDemo.vue
+++ b/src/views/steps/SeatDemo.vue
@@ -11,11 +11,11 @@
                 <div class="p-fluid p-formgrid p-grid">
                     <div class="p-field p-col-12 p-md-6">
                         <label for="class">Class</label>
-                        <Dropdown inputId="class" v-model="selectedClass" :options="classes" @change="setVagons($event)" optionLabel="name" placeholder="Select a Class" />
+                        <Dropdown inputId="class" v-model="selectedClass" :options="classes" @change="setWagons($event)" optionLabel="name" placeholder="Select a Class" />
                     </div>
                     <div class="p-field p-col-12 p-md-6">
                         <label for="lastname">Wagon</label>
-                        <Dropdown inputId="wagon" v-model="selectedVagon" :options="vagons" @change="setSeats($event)" optionLabel="vagon" placeholder="Select a Vagon" />
+                        <Dropdown inputId="wagon" v-model="selectedWagon" :options="wagons" @change="setSeats($event)" optionLabel="wagon" placeholder="Select a Wagon" />
                     </div>
                     <div class="p-field p-col-12">
                         <label for="seat">Seat</label>
@@ -43,24 +43,24 @@ export default {
                 {name: 'Second Class', code: 'B', factor: 2},
                 {name: 'Third Class', code: 'C', factor: 3}
             ],
-            vagons: [],
-            selectedVagon: '',
+            wagons: [],
+            selectedWagon: '',
             seats: [],
             selectedSeat: ''
         }
     },
     methods: {
-        setVagons(event) {
+        setWagons(event) {
             if (this.selectedClass && event.value) {
-                this.vagons = [];
+                this.wagons = [];
                 this.seats = [];
                 for (let i = 1; i < 3 * event.value.factor; i++) {
-                    this.vagons.push({vagon: i + event.value.code, type: event.value.name, factor: event.value.factor});
+                    this.wagons.push({wagon: i + event.value.code, type: event.value.name, factor: event.value.factor});
                 }
             }
         },
         setSeats(event) {
-            if (this.selectedVagon && event.value) {
+            if (this.selectedWagon && event.value) {
                 this.seats = [];
                 for (let i = 1; i < 10 * event.value.factor; i++) {
                     this.seats.push({seat: i, type: event.value.type});
@@ -68,11 +68,11 @@ export default {
             }
         },
         nextPage() {
-            this.$emit('next-page', {formData: {class: this.selectedClass.name, vagon: this.selectedVagon.vagon, seat: this.selectedSeat.seat}, pageIndex: 1});
+            this.$emit('next-page', {formData: {class: this.selectedClass.name, wagon: this.selectedWagon.wagon, seat: this.selectedSeat.seat}, pageIndex: 1});
         },
         prevPage() {
             this.$emit('prev-page', {pageIndex: 1});
         }
     }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/tabmenu/TabMenuDemo.vue b/src/views/tabmenu/TabMenuDemo.vue
index 46b1223ec..76032cfbf 100755
--- a/src/views/tabmenu/TabMenuDemo.vue
+++ b/src/views/tabmenu/TabMenuDemo.vue
@@ -10,9 +10,21 @@
 
         <div class="content-section implementation">
             <div class="card">
+                <h5>Default</h5>
                 <TabMenu :model="items" />
                 <router-view/>
             </div>
+            
+            <div class="card">
+                <h5>Programmatic</h5>
+                <div class="p-py-2">
+                    <Button @click="active = 0" class="p-button-text" label="Activate 1st" />
+                    <Button @click="active = 1" class="p-button-text p-mr-2" label="Activate 2nd" />
+                    <Button @click="active = 2" class="p-button-text p-mr-2" label="Activate 3rd" />
+                </div>
+
+                <TabMenu :model="items2" v-model:activeIndex="active" />
+            </div>
         </div>
 
         <TabMenuDoc />
@@ -25,12 +37,20 @@ import TabMenuDoc from './TabMenuDoc';
 export default {
     data() {
         return {
+            active: 3,
             items: [
                 {label: 'Home', icon: 'pi pi-fw pi-home', to: '/tabmenu'},
                 {label: 'Calendar', icon: 'pi pi-fw pi-calendar', to: '/tabmenu/calendar'},
                 {label: 'Edit', icon: 'pi pi-fw pi-pencil', to: '/tabmenu/edit'},
                 {label: 'Documentation', icon: 'pi pi-fw pi-file', to: '/tabmenu/documentation'},
                 {label: 'Settings', icon: 'pi pi-fw pi-cog', to: '/tabmenu/settings'}
+            ],
+            items2: [
+                {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'}
             ]
         }
     },
diff --git a/src/views/tabmenu/TabMenuDoc.vue b/src/views/tabmenu/TabMenuDoc.vue
index 6d7b3e5d1..7eaacae45 100755
--- a/src/views/tabmenu/TabMenuDoc.vue
+++ b/src/views/tabmenu/TabMenuDoc.vue
@@ -10,9 +10,32 @@ import TabMenu from 'primevue/tabmenu';
         <p>TabMenu uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
 
 		<h5>Getting Started</h5>
-		<p>TabMenu is integrated with Vue Router and requires a collection of menuitems as its model.</p>
+		<p>TabMenu requires a collection of menuitems as its model.</p>
 <pre v-code><code>
 &lt;TabMenu :model="items" /&gt;
+
+</code></pre>
+
+<pre v-code.script><code>
+export default {
+	data() {
+		return {
+			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'}
+            ]
+		}
+	}
+}
+
+</code></pre>
+
+        <p>TabMenu can be also integrated with Vue Router.</p>
+        <pre v-code><code>
+&lt;TabMenu :model="items" /&gt;
 &lt;router-view /&gt;
 
 </code></pre>
@@ -32,10 +55,24 @@ export default {
 	}
 }
 
+</code></pre>
+
+        <h5>Active</h5>
+        <p>Visibility of the content is specified with the activeIndex property that supports one or two-way binding.</p>
+
+<pre v-code><code>
+&lt;TabMenu :model="items" :activeIndex="activeIndex" /&gt;
+
+</code></pre>
+
+        <p>Two-way binding requires v-model.</p>
+<pre v-code><code>
+&lt;TabMenu :model="items" v-model:activeIndex="activeIndex" /&gt;
+
 </code></pre>
 
         <h5>Templating</h5>
-         <p>TabMenu offers content customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
+        <p>TabMenu offers content customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
 <pre v-code><code><template v-pre>
 &lt;TabMenu :model="items"&gt;
     &lt;template #item="{item}"&gt;
@@ -69,6 +106,34 @@ export default {
                         <td>boolean</td>
                         <td>true</td>
                         <td>Defines if active route highlight should match the exact route path.</td>
+                    </tr>
+                    <tr>
+                        <td>activeIndex</td>
+                        <td>number</td>
+                        <td>0</td>
+                        <td>Active index of menuitem.</td>
+                    </tr>
+				</tbody>
+			</table>
+		</div>
+
+        <h5>Events</h5>
+		<div class="doc-tablewrapper">
+			<table class="doc-table">
+				<thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+				</thead>
+				<tbody>
+                    <tr>
+                        <td>tab-change</td>
+                        <td>event.originalEvent: Browser event  <br/>
+                            event.index: Index of the selected tab
+                        </td>
+                        <td>Callback to invoke when an active tab is changed.</td>
                     </tr>
 				</tbody>
 			</table>
@@ -146,8 +211,22 @@ export default {
                     content: `
 <template>
     <div>
-        <TabMenu :model="items" />
-        <router-view />
+        <div class="card">
+            <h5>Default</h5>
+            <TabMenu :model="items" />
+            <router-view/>
+        </div>
+            
+        <div class="card">
+            <h5>Programmatic</h5>
+            <div class="p-py-2">
+                <Button @click="active = 0" class="p-button-text" label="Activate 1st" />
+                <Button @click="active = 1" class="p-button-text p-mr-2" label="Activate 2nd" />
+                <Button @click="active = 2" class="p-button-text p-mr-2" label="Activate 3rd" />
+            </div>
+
+            <TabMenu :model="items2" v-model:activeIndex="active" />
+        </div>
     </div>
 </template>
 
@@ -155,32 +234,55 @@ export default {
 export default {
     data() {
         return {
+            active: 3,
             items: [
                 {
-                    label: 'Home', 
-                    icon: 'pi pi-fw pi-home', 
+                    label: 'Home',
+                    icon: 'pi pi-fw pi-home',
                     to: '/'
                 },
                 {
-                    label: 'Calendar', 
-                    icon: 'pi pi-fw pi-calendar', 
+                    label: 'Calendar',
+                    icon: 'pi pi-fw pi-calendar',
                     to: '/calendar'
                 },
                 {
-                    label: 'Edit', 
-                    icon: 'pi pi-fw pi-pencil', 
+                    label: 'Edit',
+                    icon: 'pi pi-fw pi-pencil',
                     to: '/edit'
                 },
                 {
-                    label: 'Documentation', 
-                    icon: 'pi pi-fw pi-file', 
+                    label: 'Documentation',
+                    icon: 'pi pi-fw pi-file',
                     to: '/documentation'
                 },
                 {
-                    label: 'Settings', 
-                    icon: 'pi pi-fw pi-cog', 
+                    label: 'Settings',
+                    icon: 'pi pi-fw pi-cog',
                     to: '/settings'
                 }
+            ],
+            items2: [
+                {
+                    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'
+                }
             ]
         }
     }
@@ -198,8 +300,22 @@ export default {
                     content: `
 <template>
     <div>
-        <TabMenu :model="items" />
-        <router-view />
+        <div class="card">
+            <h5>Default</h5>
+            <TabMenu :model="items" />
+            <router-view/>
+        </div>
+            
+        <div class="card">
+            <h5>Programmatic</h5>
+            <div class="p-py-2">
+                <Button @click="active = 0" class="p-button-text" label="Activate 1st" />
+                <Button @click="active = 1" class="p-button-text p-mr-2" label="Activate 2nd" />
+                <Button @click="active = 2" class="p-button-text p-mr-2" label="Activate 3rd" />
+            </div>
+
+            <TabMenu :model="items2" v-model:activeIndex="active" />
+        </div>
     </div>
 </template>
 
@@ -208,35 +324,58 @@ import { ref } from 'vue';
 
 export default {
     setup() {
+        const active = ref(3);
         const items = ref([
             {
-                label: 'Home', 
-                icon: 'pi pi-fw pi-home', 
+                label: 'Home',
+                icon: 'pi pi-fw pi-home',
                 to: '/'
             },
             {
-                label: 'Calendar', 
-                icon: 'pi pi-fw pi-calendar', 
+                label: 'Calendar',
+                icon: 'pi pi-fw pi-calendar',
                 to: '/calendar'
             },
             {
-                label: 'Edit', 
-                icon: 'pi pi-fw pi-pencil', 
+                label: 'Edit',
+                icon: 'pi pi-fw pi-pencil',
                 to: '/edit'
             },
             {
-                label: 'Documentation', 
-                icon: 'pi pi-fw pi-file', 
+                label: 'Documentation',
+                icon: 'pi pi-fw pi-file',
                 to: '/documentation'
             },
             {
-                label: 'Settings', 
-                icon: 'pi pi-fw pi-cog', 
+                label: 'Settings',
+                icon: 'pi pi-fw pi-cog',
                 to: '/settings'
             }
         ]);
+        const items2 = 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'
+            }
+        ]);
         
-        return { items }
+        return { active, items, items2 }
     }
 }
 <\\/script>