Navbars In Ionic With Angular

Using following blog, you will find out how to add custom navbar in your ionic application.

Step 1:-

Set Up Ionic in your environment

Step 2:-

Create ionic app using following command and select your framework and type

ionic start ionic-nav

Step 3:-

Create page in your application using following code

ionic generate page navbar

Step 4:-

Add following in your navbar.page.html

<ion-menu side="start" content-id="main-content">
  <ion-header>
    <ion-toolbar translucent>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <ion-item>
        <ion-icon name="balloon-outline"></ion-icon>
        <ion-label>First </ion-label>
      </ion-item>
      <ion-item>
        <ion-icon name="basketball-outline"></ion-icon>
        <ion-label>Second </ion-label>
      </ion-item>
      <ion-item>
        <ion-icon name="chatbubble-outline"></ion-icon>
        <ion-label>Third </ion-label>
      </ion-item>
      <ion-item>
        <ion-icon name="clipboard-outline"></ion-icon>
        <ion-label>Forth </ion-label>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-menu>

<div class="ion-page" id="main-content">
  <ion-header>
    <ion-toolbar>
      <ion-buttons slot="start">
        <ion-menu-button></ion-menu-button>
      </ion-buttons>
      <ion-title>Inbox</ion-title>
    </ion-toolbar>
  </ion-header>
</div>

Step 5:-

Run your ionic application using following command

npm start