iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

Tabs

By · Reviewed & last updated · Part of Ionic Tutorial

Tabs are the iOS-native navigation pattern. Ionic ships IonTabs + IonTabBar; each tab keeps its own navigation stack so swiping between tabs preserves scroll position and history.

A 3-tab app

EXAMPLE
// React example
import { IonApp, IonTabs, IonTabBar, IonTabButton,
         IonIcon, IonLabel, IonRouterOutlet, setupIonicReact } from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import { Route, Redirect } from 'react-router-dom';
import { home, person, settings } from 'ionicons/icons';

import Feed     from './pages/Feed';
import Profile  from './pages/Profile';
import Settings from './pages/Settings';

setupIonicReact();

export default function App() {
    return (
        <IonApp>
            <IonReactRouter>
                <IonTabs>
                    <IonRouterOutlet>
                        <Route exact path="/tabs/feed"     component={Feed} />
                        <Route exact path="/tabs/profile"  component={Profile} />
                        <Route exact path="/tabs/settings" component={Settings} />
                        <Redirect exact path="/" to="/tabs/feed" />
                    </IonRouterOutlet>
                    <IonTabBar slot="bottom">
                        <IonTabButton tab="feed" href="/tabs/feed">
                            <IonIcon icon={home} />  <IonLabel>Feed</IonLabel>
                        </IonTabButton>
                        <IonTabButton tab="profile" href="/tabs/profile">
                            <IonIcon icon={person} /> <IonLabel>Profile</IonLabel>
                        </IonTabButton>
                        <IonTabButton tab="settings" href="/tabs/settings">
                            <IonIcon icon={settings} /> <IonLabel>Settings</IonLabel>
                        </IonTabButton>
                    </IonTabBar>
                </IonTabs>
            </IonReactRouter>
        </IonApp>
    );
}

Why it matters

Each tab gets its own navigation stack. Tapping the active tab returns to the root of that stack — the standard iOS pattern users expect.

Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.

Example

Example
<ion-tabs>
    <ion-tab-bar slot="bottom">
        <ion-tab-button tab="feed"><ion-icon name="home"/></ion-tab-button>
        <ion-tab-button tab="profile"><ion-icon name="person"/></ion-tab-button>
    </ion-tab-bar>
</ion-tabs>
Try it Yourself »

Discussion

Loading…