Skip to main content
Mapagam

Working with Navigation Structure

1. Using IonTabs Component

Property Description Default Notes
selectedTab Tab to be selected by default null Can be set to tab ID or index
layout Layout of the tabs (icon-top, icon-start, icon-end, icon-bottom) icon-top Controls how icons and text are arranged
mode Mode of the tabs (ios or md) md Applies platform-specific styling

Example: Basic IonTabs Usage

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="home">
      <ion-icon name="home"></ion-icon>
      <ion-label>Home</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="settings">
      <ion-icon name="settings"></ion-icon>
      <ion-label>Settings</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

Example: Tab Navigation with Router

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="home" href="/home">
      <ion-icon name="home"></ion-icon>
      <ion-label>Home</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="profile" href="/profile">
      <ion-icon name="person"></ion-icon>
      <ion-label>Profile</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>
Note: The tab attribute on ion-tab-button must match the tab property of the corresponding ion-tab.

2. Using IonTabBar Component

Property Description Default Notes
tabs Array of tab configurations [] Defines each tab's properties and navigation
layout Layout of the tab bar icon-top Options: icon-top, icon-left, icon-bottom, icon-right
placement Placement of the tab bar bottom Options: top, bottom
color Color of the tab bar primary Options: primary, secondary, tertiary
translucent Whether the tab bar is translucent false Applies a semi-transparent background

Example: Basic IonTabBar Usage

<IonTabs>
  <IonTabBar slot="bottom">
    <IonTabButton tab="home">
      <IonIcon icon="home" />
      <IonLabel>Home</IonLabel>
    </IonTabButton>

    <IonTabButton tab="about">
      <IonIcon icon="information-circle" />
      <IonLabel>About</IonLabel>
    </IonTabButton>
  </IonTabBar>
</IonTabs>

Example: Tab Configuration with Navigation

<IonTabs>
  <IonTabBar slot="bottom">
    <IonTabButton tab="dashboard" href="/dashboard">
      <IonIcon icon="grid" />
      <IonLabel>Dashboard</IonLabel>
    </IonTabButton>

    <IonTabButton tab="profile" href="/profile">
      <IonIcon icon="person" />
      <IonLabel>Profile</IonLabel>
    </IonTabButton>
  </IonTabBar>
</IonTabs>
Note: The IonTabBar component must be used inside an IonTabs container to function correctly.

3. Using IonTabButton Component

Property Description Default Notes
tab The tab identifier for the button None Must match the tab property of an <IonTabBar> child
href Navigate to a URL when clicked None Can be used for external links or deep linking
routerLink Router link to navigate to a route None Used with Ionic's router for internal navigation
routerDirection Direction of the navigation transition forward Options: forward, back, root

Example: Basic IonTabButton Usage

<IonTabBar slot="bottom">
  <IonTabButton tab="home">
    <IonIcon icon="home" />
    <IonLabel>Home</IonLabel>
  </IonTabButton>

  <IonTabButton tab="settings">
    <IonIcon icon="settings" />
    <IonLabel>Settings</IonLabel>
  </IonTabButton>
</IonTabBar>
<IonTabBar slot="bottom">
  <IonTabButton tab="profile" routerLink="/profile">
    <IonIcon icon="person" />
    <IonLabel>Profile</IonLabel>
  </IonTabButton>

  <IonTabButton tab="notifications" routerLink="/notifications">
    <IonIcon icon="notifications" />
    <IonLabel>Notifications</IonLabel>
  </IonTabButton>
</IonTabBar>
Note: The tab property must match the tab identifier defined in the IonTabBar component.

4. Using IonMenu Component

Property Description Default Notes
menuId Unique identifier for the menu null Required if multiple menus are present
side Side of the screen where menu appears start Can be start or end
type Menu type (e.g., overlay, reveal) overlay Controls how the menu behaves on different devices
swipeGesture Enables swipe to open/close menu true Set to false to disable swipe gesture
disabled Disables the menu component false Set to true to disable menu interaction

Example: Basic IonMenu Usage

<ion-menu menuId="first-menu">
  <ion-header>
    <ion-toolbar color="primary">
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <ion-item>Home</ion-item>
      <ion-item>Settings</ion-item>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-router-outlet main></ion-router-outlet>

Example: Menu with Navigation

<ion-menu side="start" menuId="main-menu">
  <ion-content>
    <ion-list>
      <ion-item routerLink="/home">Home</ion-item>
      <ion-item routerLink="/profile">Profile</ion-item>
      <ion-item routerLink="/settings">Settings</ion-item>
    </ion-list>
  </ion-content>
</ion-menu>
Note: The menuId must match the menu attribute in the ion-menu-toggle component to control the menu.

Key Features of IonMenu

  • Supports multiple menus with unique identifiers
  • Can be positioned on the start or end side of the screen
  • Provides swipe gesture support for mobile devices
  • Integrates with Ionic's routing system for navigation

5. Using IonMenuButton Component

Property Values Description
menuId string ID of the menu to open/close
autoHide true | false Whether to hide the button when the menu is not active

Example: Basic Usage

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button />
    </ion-buttons>
    <ion-title>My App</ion-title>
  </ion-toolbar>
</ion-header>

Example: With Custom Menu ID

<ion-menu menuId="customMenu">
  <ion-content>
    <ion-list>
      <ion-item>Menu Item</ion-item>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button menuId="customMenu" />
    </ion-buttons>
  </ion-toolbar>
</ion-header>
Note: The IonMenuButton component is designed to work with the ion-menu and requires a matching menuId to function correctly.

6. Using IonRouterOutlet Component

Property Description Default Notes
ionRouterOutlet Component to render the router outlet for Ionic navigation None Required for routing in Ionic apps
routerDirection Direction of the navigation transition "forward" Can be "forward", "back", or "root"

Example: Basic Usage of IonRouterOutlet

<IonRouterOutlet>
  <IonPage>
    <IonContent>
      <h1>Home Page</h1>
    </IonContent>
  </IonPage>
</IonRouterOutlet>
Note: IonRouterOutlet is used in conjunction with IonStack or IonTabs to manage navigation in Ionic applications.

7. Using IonNav Component

The IonNav component in Ionic is a powerful navigation container that allows you to manage complex navigation flows within your application. It provides a way to push and pop pages, similar to how navigation stacks work in native mobile apps.

Property Description Default Value
root The root component to load in the navigation stack. undefined
rootParams Parameters to pass to the root component. undefined
animated Whether to animate transitions between pages. true

Example: Basic Usage of IonNav

<IonNav root={HomePage} />

Example: Navigation with Parameters

<IonNav root={ProfilePage} rootParams={{ userId: 123 }} />
Note: The IonNav component is particularly useful when building complex navigation structures where you need more control over the navigation stack than what IonRouter provides.
Warning: Make sure to define your root component properly and ensure that it is a valid Ionic page component.

8. Using IonBackButton Component

The IonBackButton component in Ionic provides a convenient way to navigate back in the application's history. It automatically handles the navigation logic and can be customized with various properties.

Property Values Description
routerLink string Specifies the route to navigate to when the back button is clicked. If not provided, it uses the default navigation behavior.
defaultHref string The default URL to navigate to if no previous route is available. This is useful for setting a fallback navigation path.
text string Custom text to display for the back button. By default, it displays the system's back arrow or label.
icon string The icon to use for the back button. Defaults to arrow-back.
mode 'ios' | 'md' Defines the mode of the component, either iOS or Material Design. This affects the appearance and behavior.

Example: Basic Usage of IonBackButton

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button default-href="/home"></ion-back-button>
    </ion-buttons>
    <ion-title>Details Page</ion-title>
  </ion-toolbar>
</ion-header>

Example: Customizing the Back Button

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button
        text="Go Back"
        icon="arrow-up"
        default-href="/dashboard">
      </ion-back-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

9. Setting Up Split Pane

The Split Pane component in Ionic allows you to create a layout with a sidebar and main content area, commonly used for navigation in mobile apps. It's particularly useful for creating a collapsible sidebar on larger screens.

Property Values Description
when string | boolean Condition to show the split pane. Can be a media query or boolean.
contentId string ID of the content element to be managed by the split pane.

Example: Basic Split Pane Setup

<ion-split-pane when="(min-width: 768px)">
  <ion-menu side="start">
    <ion-header>
      <ion-toolbar>
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-list>
        <ion-item>Home</ion-item>
        <ion-item>Settings</ion-item>
      </ion-list>
    </ion-content>
  </ion-menu>

  <ion-router-outlet main></ion-router-outlet>
</ion-split-pane>
Note: The ion-split-pane component must wrap the menu and router outlet to properly manage layout changes.
Warning: Ensure that the contentId matches the ID of your content element if using custom layouts.

10. Configuring Breadcrumbs

Property Description Default Notes
breadcrumbs Array of breadcrumb items to display [] Each item is an object with label and url
separator Character or element to separate breadcrumbs > Can be a string or HTML element
showHome Whether to show a home link in breadcrumbs true Set to false to hide the home link

Example: Basic Breadcrumb Configuration

import { Breadcrumb } from '@ionic/angular';

const breadcrumbs: Breadcrumb[] = [
  {
    label: 'Home',
    url: '/home'
  },
  {
    label: 'Products',
    url: '/products'
  },
  {
    label: 'Electronics',
    url: '/products/electronics'
  }
];

// In component
this.breadcrumbs = breadcrumbs;

Example: Custom Separator

<ion-breadcrumbs separator="/">
  <ion-breadcrumb label="Home" url="/home"></ion-breadcrumb>
  <ion-breadcrumb label="Category" url="/category"></ion-breadcrumb>
  <ion-breadcrumb label="Item" url="/item"></ion-breadcrumb>
</ion-breadcrumbs>
Note: Breadcrumbs are useful for improving navigation in deep hierarchies and enhancing SEO.

Was this article helpful?

Related Cheat Sheets