You've successfully subscribed to Smartcodehub ™ Blog
Great! Next, complete checkout for full access to Smartcodehub ™ Blog
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.
Ionic 5 | Instagram Bottom Navigation UI

Ionic 5 | Instagram Bottom Navigation UI

How we can build instagram bottom navigation UI in Ionic 5 With using Ionic Properties of scss and also we are going to learn how to implement tabs navigation in ionic 5 blank Project.

Abhishek Dana
Abhishek Dana

Hello there today in this blog we are going to learn about how we can build instagram bottom navigation UI in Ionic 5 With using Ionic Properties of scss and also we are going to learn how to implement tabs navigation in ionic 5 blank Project.

So without wasting time to read blog we are going to write code with output so that you can understand each step clearly.

First let's generate ionic 5 blank project without capacitor in angular framework and after generating the project open up the project in code editor and head up towards the integrated terminal

ionic g instagramBottomUI

After Opening the project in code we need to generate our first module that is tabs module with tabs page but before that make sure you delete home folder completely and also remove the module from app-routing.module.ts file then run the above command to generate tabs page in ionic ..

ionic g page tabs

After generating tabs page we need to change in our app-routing.module.ts file and set initial route to tabs module...

import { NgModule } from "@angular/core";
import { PreloadAllModules, RouterModule, Routes } from "@angular/router";

const routes: Routes = [
  {
    path: "",
    loadChildren: () =>
      import("./tabs/tabs.module").then((m) => m.TabsPageModule),
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }),
  ],
  exports: [RouterModule],
})
export class AppRoutingModule {}

After making change in app-routing file we need to generate some pages in tabs folder like home ,search , notification , profile so let's generate them...

ionic g page tabs/home
ionic g page tabs/search
ionic g page tabs/notification
ionic g page tabs/profile

After generating page head over to tabs-routing.module.ts and change the file to...

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";

import { TabsPage } from "./tabs.page";

const routes: Routes = [
  {
    path: "tabs",
    component: TabsPage,
    children: [
      {
        path: "home",
        children: [
          {
            path: "",
            loadChildren: () =>
              import("./home/home.module").then((m) => m.HomePageModule),
          },
        ],
      },
      {
        path: "search",
        children: [
          {
            path: "",
            loadChildren: () =>
              import("./search/search.module").then((m) => m.SearchPageModule),
          },
        ],
      },
      {
        path: "notification",
        children: [
          {
            path: "",
            loadChildren: () =>
              import("./notification/notification.module").then(
                (m) => m.NotificationPageModule
              ),
          },
        ],
      },
      {
        path: "profile",
        children: [
          {
            path: "",
            loadChildren: () =>
              import("./profile/profile.module").then(
                (m) => m.ProfilePageModule
              ),
          },
        ],
      },
      {
        path: "",
        redirectTo: "/tabs/home",
        pathMatch: "full",
      },
    ],
  },
  {
    path: "",
    redirectTo: "/tabs/home",
    pathMatch: "full",
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class TabsPageRoutingModule {}

After changing tabs-routing.module.ts file we need to change in tabs.page.html file with ionic tabs initial UI that can be found here and above also..

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="schedule">
      <ion-icon name="calendar"></ion-icon>
      <ion-label>Schedule</ion-label>
      <ion-badge>6</ion-badge>
    </ion-tab-button>

    <ion-tab-button tab="speakers">
      <ion-icon name="person-circle"></ion-icon>
      <ion-label>Speakers</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="map">
      <ion-icon name="map"></ion-icon>
      <ion-label>Map</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-bar>
</ion-tabs>

Here we have successfulle implemented Tabs to ionic 5 blank Project.

Now we need to change the ion-tab-button with our tabs like for home tab we need to change first tab="Home" the we need to change ionic icon, the label and (optional ion-badge remove it if not needed).

Now let's design tabs according to our need first i would basically require icons that are similar to instagram icon so we are going to use iconsout icons is free and we need to download svg of that icon and save it into our src/assets/icons folder and then use that icons in our project using ion-icon so here we go

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="home">
      <ion-icon src="../../assets/icon/home.svg"></ion-icon>
    </ion-tab-button>

    <ion-tab-button tab="search">
      <ion-icon src="../../assets/icon/search.svg"></ion-icon>

    </ion-tab-button>
    <ion-tab-button tab="">
      <ion-icon src="../../assets/icon/add.svg"></ion-icon>

    </ion-tab-button>
    <ion-tab-button tab="notification">
      <ion-icon src="../../assets/icon/notification.svg"></ion-icon>
    </ion-tab-button>

    <ion-tab-button tab="profile">
      <ion-icon src="../../assets/icon/person.svg"></ion-icon>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

OUTPUT

Here is the output of our simple instagram like bottom UI navigation.

Hope this would be helpful to everyone 😊😊

Stay tuned for more such topic and UI design