diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx
index 97459b92add..93211adf2de 100644
--- a/core/src/components/item/item.tsx
+++ b/core/src/components/item/item.tsx
@@ -8,7 +8,7 @@ import { createColorClasses, hostContext, openURL } from '@utils/theme';
 import { chevronForward } from 'ionicons/icons';
 
 import { config } from '../../global/config';
-import { getIonTheme } from '../../global/ionic-global';
+import { getIonMode, getIonTheme } from '../../global/ionic-global';
 import type { AnimationBuilder, Color, CssClassMap, StyleEventDetail } from '../../interface';
 import type { RouterDirection } from '../router/utils/interface';
 
@@ -246,7 +246,13 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
   }
 
   private canActivate(): boolean {
-    return this.isClickable() || this.hasCover();
+    const theme = getIonTheme(this);
+    const mode = getIonMode(this);
+    const shouldActivate = this.isClickable() || this.hasCover();
+    if (theme !== 'ionic') {
+      return shouldActivate;
+    }
+    return mode === 'md' && shouldActivate;
   }
 
   private isFocusable(): boolean {
diff --git a/core/src/components/tab-button/tab-button.tsx b/core/src/components/tab-button/tab-button.tsx
index e03b8a69e35..169e4bb0bf6 100644
--- a/core/src/components/tab-button/tab-button.tsx
+++ b/core/src/components/tab-button/tab-button.tsx
@@ -5,7 +5,7 @@ import type { Attributes } from '@utils/helpers';
 import { inheritAttributes } from '@utils/helpers';
 
 import { config } from '../../global/config';
-import { getIonTheme } from '../../global/ionic-global';
+import { getIonMode, getIonTheme } from '../../global/ionic-global';
 import type {
   TabBarChangedEventDetail,
   TabButtonClickEventDetail,
@@ -163,10 +163,20 @@ export class TabButton implements ComponentInterface, AnchorInterface {
     this.selectTab(ev);
   };
 
+  private canActivate(): boolean {
+    const theme = getIonTheme(this);
+    const mode = getIonMode(this);
+    if (theme !== 'ionic') {
+      return true;
+    }
+    return mode === 'md';
+  }
+
   render() {
     const { disabled, hasIcon, hasLabel, href, rel, target, layout, selected, tab, inheritedAttributes } = this;
     const theme = getIonTheme(this);
     const shape = this.getShape();
+    const canActivate = this.canActivate();
     const attrs = {
       download: this.download,
       href,
@@ -188,7 +198,7 @@ export class TabButton implements ComponentInterface, AnchorInterface {
           'tab-has-label-only': hasLabel && !hasIcon,
           'tab-has-icon-only': hasIcon && !hasLabel,
           [`tab-layout-${layout}`]: true,
-          'ion-activatable': true,
+          'ion-activatable': canActivate,
           'ion-selectable': true,
           [`tab-button-shape-${shape}`]: shape !== undefined,
           'ion-focusable': true,