diff --git a/addons/mail/static/src/components/messaging_menu/messaging_menu.xml b/addons/mail/static/src/components/messaging_menu/messaging_menu.xml
index 30aa0efeebf..b38777a7dda 100644
--- a/addons/mail/static/src/components/messaging_menu/messaging_menu.xml
+++ b/addons/mail/static/src/components/messaging_menu/messaging_menu.xml
@@ -22,11 +22,9 @@
                         </t>
                         <t t-else="">
                             <div class="o_MessagingMenu_dropdownMenuHeader border-bottom" t-attf-class="{{ messaging.device.isSmall ? 'o-isDeviceSmall p-2' : 'd-flex flex-shrink-0' }}">
-                                <t t-if="!messaging.device.isSmall">
-                                    <MessagingMenuTab messagingMenu="messagingMenu" tabId="'all'"/>
-                                    <MessagingMenuTab messagingMenu="messagingMenu" tabId="'chat'"/>
-                                    <MessagingMenuTab messagingMenu="messagingMenu" tabId="'channel'"/>
-                                </t>
+                                <MessagingMenuTab t-if="messagingMenu.allTab" record="messagingMenu.allTab"/>
+                                <MessagingMenuTab t-if="messagingMenu.chatTab" record="messagingMenu.chatTab"/>
+                                <MessagingMenuTab t-if="messagingMenu.channelTab" record="messagingMenu.channelTab"/>
                                 <t t-if="messaging.device.isSmall">
                                     <t t-call="mail.MessagingMenu.newMessageButton"/>
                                 </t>
diff --git a/addons/mail/static/src/components/messaging_menu_tab/messaging_menu_tab.js b/addons/mail/static/src/components/messaging_menu_tab/messaging_menu_tab.js
index 5a4ffe05291..683fa45c86e 100644
--- a/addons/mail/static/src/components/messaging_menu_tab/messaging_menu_tab.js
+++ b/addons/mail/static/src/components/messaging_menu_tab/messaging_menu_tab.js
@@ -6,24 +6,17 @@ const { Component } = owl;
 
 export class MessagingMenuTab extends Component {
 
-    //--------------------------------------------------------------------------
-    // Public
-    //--------------------------------------------------------------------------
-
     /**
-     * @returns {MessagingMenu}
+     * @returns {MessagingMenuTabView}
      */
-    get messagingMenu() {
-        return this.props.messagingMenu;
+    get messagingMenuTabView() {
+        return this.props.record;
     }
 
 }
 
 Object.assign(MessagingMenuTab, {
-    props: {
-        messagingMenu: Object,
-        tabId: String,
-    },
+    props: { record: Object },
     template: 'mail.MessagingMenuTab',
 });
 
diff --git a/addons/mail/static/src/components/messaging_menu_tab/messaging_menu_tab.xml b/addons/mail/static/src/components/messaging_menu_tab/messaging_menu_tab.xml
index a4fd1ba7645..37cf62b361c 100644
--- a/addons/mail/static/src/components/messaging_menu_tab/messaging_menu_tab.xml
+++ b/addons/mail/static/src/components/messaging_menu_tab/messaging_menu_tab.xml
@@ -2,10 +2,8 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.MessagingMenuTab" owl="1">
-        <button class="o_MessagingMenuTab o-desktop btn btn-link" t-att-class="{ 'o-active fw-bolder': messagingMenu.activeTabId === props.tabId, 'text-500': messagingMenu.activeTabId !== props.tabId }" t-on-click="messagingMenu.onClickDesktopTabButton" type="button" role="tab" t-att-data-tab-id="props.tabId" t-attf-class="{{ className }}" t-ref="root">
-            <t t-if="props.tabId === 'all'">All</t>
-            <t t-elif="props.tabId === 'chat'">Chat</t>
-            <t t-elif="props.tabId === 'channel'">Channels</t>
+        <button class="o_MessagingMenuTab o-desktop btn btn-link" t-att-class="{ 'o-active fw-bolder': messagingMenuTabView.isActive, 'text-500': !messagingMenuTabView.isActive }" t-on-click="messagingMenuTabView.onClick" type="button" role="tab" t-att-data-tab-id="messagingMenuTabView.id" t-attf-class="{{ className }}" t-ref="root">
+            <t t-out="messagingMenuTabView.name"/>
         </button>
     </t>
 
diff --git a/addons/mail/static/src/models/messaging_menu.js b/addons/mail/static/src/models/messaging_menu.js
index 55b1b0a735d..d8d291756ef 100644
--- a/addons/mail/static/src/models/messaging_menu.js
+++ b/addons/mail/static/src/models/messaging_menu.js
@@ -21,12 +21,6 @@ registerModel({
         close() {
             this.update({ isOpen: false });
         },
-        /**
-         * @param {MouseEvent} ev
-         */
-        onClickDesktopTabButton(ev) {
-            this.update({ activeTabId: ev.currentTarget.dataset.tabId });
-        },
         /**
          * @param {MouseEvent} ev
          */
@@ -124,6 +118,18 @@ registerModel({
         },
     },
     fields: {
+        activeTab: one('MessagingMenuTabView', {
+            compute() {
+                switch (this.activeTabId) {
+                    case 'all':
+                        return this.allTab;
+                    case 'channel':
+                        return this.channelTab;
+                    case 'chat':
+                        return this.chatTab;
+                }
+            },
+        }),
         /**
          * Tab selected in the messaging menu.
          * Either 'all', 'chat' or 'channel'.
@@ -131,6 +137,33 @@ registerModel({
         activeTabId: attr({
             default: 'all',
         }),
+        allTab: one('MessagingMenuTabView', {
+            compute() {
+                if (this.isOpen && this.messaging.isInitialized && !this.messaging.device.isSmall) {
+                    return {};
+                }
+                return clear();
+            },
+            inverse: 'ownerAsAll',
+        }),
+        channelTab: one('MessagingMenuTabView', {
+            compute() {
+                if (this.isOpen && this.messaging.isInitialized && !this.messaging.device.isSmall) {
+                    return {};
+                }
+                return clear();
+            },
+            inverse: 'ownerAsChannel',
+        }),
+        chatTab: one('MessagingMenuTabView', {
+            compute() {
+                if (this.isOpen && this.messaging.isInitialized && !this.messaging.device.isSmall) {
+                    return {};
+                }
+                return clear();
+            },
+            inverse: 'ownerAsChat',
+        }),
         component: attr(),
         /**
          * States the counter of this messaging menu. The counter is an integer
diff --git a/addons/mail/static/src/models/messaging_menu_tab_view.js b/addons/mail/static/src/models/messaging_menu_tab_view.js
new file mode 100644
index 00000000000..2b791353ab2
--- /dev/null
+++ b/addons/mail/static/src/models/messaging_menu_tab_view.js
@@ -0,0 +1,68 @@
+/** @odoo-module **/
+
+import { attr, one } from '@mail/model/model_field';
+import { registerModel } from '@mail/model/model_core';
+
+registerModel({
+    name: 'MessagingMenuTabView',
+    identifyingMode: 'xor',
+    recordMethods: {
+        /**
+         * @param {MouseEvent} ev
+         */
+        onClick(ev) {
+            this.messaging.messagingMenu.update({ activeTabId: this.id });
+        },
+    },
+    fields: {
+        /**
+         * Note: when possible, better use the relations with MessagingMenu
+         * rather than these hardcoded IDs.
+         */
+        id: attr({
+            compute() {
+                if (this.ownerAsAll) {
+                    return 'all';
+                }
+                if (this.ownerAsChannel) {
+                    return 'channel';
+                }
+                if (this.ownerAsChat) {
+                    return 'chat';
+                }
+            },
+            required: true,
+        }),
+        isActive: attr({
+            compute() {
+                return this.messaging.messagingMenu.activeTab === this;
+            },
+        }),
+        name: attr({
+            compute() {
+                if (this.ownerAsAll) {
+                    return this.env._t("All");
+                }
+                if (this.ownerAsChannel) {
+                    return this.env._t("Channels");
+                }
+                if (this.ownerAsChat) {
+                    return this.env._t("Chats");
+                }
+            },
+            required: true,
+        }),
+        ownerAsAll: one('MessagingMenu', {
+            identifying: true,
+            inverse: 'allTab',
+        }),
+        ownerAsChannel: one('MessagingMenu', {
+            identifying: true,
+            inverse: 'channelTab',
+        }),
+        ownerAsChat: one('MessagingMenu', {
+            identifying: true,
+            inverse: 'chatTab',
+        }),
+    },
+});