Mobile Navigation: Responsive Web Navbar vs Native Tabs & Ionic iOS 26 Tab Bar

import React from 'react';
import { IonTabs, IonRouterOutlet, IonTabBar, IonTabButton, IonIcon, IonLabel } from '@ionic/react';
import { home, search, notifications, person } from 'ionicons/icons';
import { Haptics, ImpactStyle } from '@capacitor/haptics';

export const AppTabs = () => {
  const triggerHaptic = async () => {
    await Haptics.impact({ style: ImpactStyle.Light });
  };

  return (
    <IonTabs>
      <IonRouterOutlet>{/* Routes */}</IonRouterOutlet>
      <IonTabBar slot="bottom" className="ios26-blur-tabs">
        <IonTabButton tab="home" href="/en/home" onClick={triggerHaptic}>
          <IonIcon icon={home} />
          <IonLabel>Home</IonLabel>
        </IonTabButton>
        <IonTabButton tab="explore" href="/en/explore" onClick={triggerHaptic}>
          <IonIcon icon={search} />
          <IonLabel>Explore</IonLabel>
        </IonTabButton>
        <IonTabButton tab="notifications" href="/en/notifications" onClick={triggerHaptic}>
          <IonIcon icon={notifications} />
          <IonLabel>Alerts</IonLabel>
        </IonTabButton>
      </IonTabBar>
    </IonTabs>
  );
};