In this section, we will explore two essential navigation components in Ionic: Tabs and Side Menus. These components are fundamental for creating a user-friendly and intuitive navigation experience in your Ionic applications.

Tabs and Side Menus are used to organize and navigate between different sections of your app. Tabs are typically used for top-level navigation, while Side Menus (also known as Drawers) are used for secondary navigation or additional options.

• Tabs: A set of buttons typically located at the bottom of the screen, allowing users to switch between different views or pages.
• Side Menus: A sliding panel that can be opened from the side of the screen, usually containing a list of navigation options or settings.

1. Generate a New Ionic App with Tabs Template:

   ionic start myTabsApp tabs
   

   This command creates a new Ionic app with a pre-configured tabs template.

2. Understanding the Tabs Structure: The tabs template includes a tabs folder with the following structure:

   src/
   └── app/
       └── tabs/
           ├── tabs-routing.module.ts
           ├── tabs.module.ts
           └── tabs.page.html
   

3. Tabs Page HTML: The tabs.page.html file defines the layout of the tabs:

   <ion-tabs>
     <ion-tab-bar slot="bottom">
       <ion-tab-button tab="tab1">
         <ion-icon name="triangle"></ion-icon>
         <ion-label>Tab 1</ion-label>
       </ion-tab-button>
   
       <ion-tab-button tab="tab2">
         <ion-icon name="ellipse"></ion-icon>
         <ion-label>Tab 2</ion-label>
       </ion-tab-button>
   
       <ion-tab-button tab="tab3">
         <ion-icon name="square"></ion-icon>
         <ion-label>Tab 3</ion-label>
       </ion-tab-button>
     </ion-tab-bar>
   </ion-tabs>
   

4. Routing Configuration: The tabs-routing.module.ts file configures the routes for each tab:

   const routes: Routes = [
     {
       path: 'tabs',
       component: TabsPage,
       children: [
         {
           path: 'tab1',
           loadChildren: () => import('../tab1/tab1.module').then(m => m.Tab1PageModule)
         },
         {
           path: 'tab2',
           loadChildren: () => import('../tab2/tab2.module').then(m => m.Tab2PageModule)
         },
         {
           path: 'tab3',
           loadChildren: () => import('../tab3/tab3.module').then(m => m.Tab3PageModule)
         },
         {
           path: '',
           redirectTo: '/tabs/tab1',
           pathMatch: 'full'
         }
       ]
     },
     {
       path: '',
       redirectTo: '/tabs/tab1',
       pathMatch: 'full'
     }
   ];
   

Let's create a simple tabs application with three tabs: Home, About, and Contact.

1. Generate the App:

   ionic start myTabsApp tabs
   

2. Modify tabs.page.html:

   <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="about">
         <ion-icon name="information-circle"></ion-icon>
         <ion-label>About</ion-label>
       </ion-tab-button>
   
       <ion-tab-button tab="contact">
         <ion-icon name="call"></ion-icon>
         <ion-label>Contact</ion-label>
       </ion-tab-button>
     </ion-tab-bar>
   </ion-tabs>
   

3. Configure Routes in tabs-routing.module.ts:

   const routes: Routes = [
     {
       path: 'tabs',
       component: TabsPage,
       children: [
         {
           path: 'home',
           loadChildren: () => import('../home/home.module').then(m => m.HomePageModule)
         },
         {
           path: 'about',
           loadChildren: () => import('../about/about.module').then(m => m.AboutPageModule)
         },
         {
           path: 'contact',
           loadChildren: () => import('../contact/contact.module').then(m => m.ContactPageModule)
         },
         {
           path: '',
           redirectTo: '/tabs/home',
           pathMatch: 'full'
         }
       ]
     },
     {
       path: '',
       redirectTo: '/tabs/home',
       pathMatch: 'full'
     }
   ];
   

1. Generate a New Ionic App with Side Menu Template:

   ionic start mySideMenuApp sidemenu
   

   This command creates a new Ionic app with a pre-configured side menu template.

2. Understanding the Side Menu Structure: The side menu template includes a menu folder with the following structure:

   src/
   └── app/
       └── menu/
           ├── menu-routing.module.ts
           ├── menu.module.ts
           └── menu.page.html
   

3. Side Menu Page HTML: The menu.page.html file defines the layout of the side menu:

   <ion-menu content-id="main-content">
     <ion-header>
       <ion-toolbar>
         <ion-title>Menu</ion-title>
       </ion-toolbar>
     </ion-header>
     <ion-content>
       <ion-list>
         <ion-menu-toggle auto-hide="false">
           <ion-item routerLink="/folder/Inbox" routerDirection="root">
             <ion-icon slot="start" name="mail"></ion-icon>
             <ion-label>Inbox</ion-label>
           </ion-item>
           <ion-item routerLink="/folder/Outbox" routerDirection="root">
             <ion-icon slot="start" name="paper-plane"></ion-icon>
             <ion-label>Outbox</ion-label>
           </ion-item>
         </ion-menu-toggle>
       </ion-list>
     </ion-content>
   </ion-menu>
   
   <ion-router-outlet id="main-content"></ion-router-outlet>
   

4. Routing Configuration: The menu-routing.module.ts file configures the routes for the side menu:

   const routes: Routes = [
     {
       path: '',
       component: MenuPage,
       children: [
         {
           path: 'folder/:id',
           loadChildren: () => import('../folder/folder.module').then(m => m.FolderPageModule)
         },
         {
           path: '',
           redirectTo: '/folder/Inbox',
           pathMatch: 'full'
         }
       ]
     }
   ];
   

Let's create a simple side menu application with two items: Inbox and Outbox.

1. Generate the App:

   ionic start mySideMenuApp sidemenu
   

2. Modify menu.page.html:

   <ion-menu content-id="main-content">
     <ion-header>
       <ion-toolbar>
         <ion-title>Menu</ion-title>
       </ion-toolbar>
     </ion-header>
     <ion-content>
       <ion-list>
         <ion-menu-toggle auto-hide="false">
           <ion-item routerLink="/folder/Inbox" routerDirection="root">
             <ion-icon slot="start" name="mail"></ion-icon>
             <ion-label>Inbox</ion-label>
           </ion-item>
           <ion-item routerLink="/folder/Outbox" routerDirection="root">
             <ion-icon slot="start" name="paper-plane"></ion-icon>
             <ion-label>Outbox</ion-label>
           </ion-item>
         </ion-menu-toggle>
       </ion-list>
     </ion-content>
   </ion-menu>
   
   <ion-router-outlet id="main-content"></ion-router-outlet>
   

3. Configure Routes in menu-routing.module.ts:

   const routes: Routes = [
     {
       path: '',
       component: MenuPage,
       children: [
         {
           path: 'folder/:id',
           loadChildren: () => import('../folder/folder.module').then(m => m.FolderPageModule)
         },
         {
           path: '',
           redirectTo: '/folder/Inbox',
           pathMatch: 'full'
         }
       ]
     }
   ];
   

In this section, we covered the basics of creating and using Tabs and Side Menus in Ionic applications. Tabs are ideal for top-level navigation, while Side Menus provide a convenient way to access secondary options or settings. By understanding and implementing these components, you can create a more organized and user-friendly navigation experience in your Ionic apps.

Next, we will delve into Styling and Theming in Ionic, where you will learn how to customize the appearance of your app to match your design requirements.