So far, we have used both menu and tabs, but in different applications. In this example, we are using both of them in a single application. Let's take a look at our app.html again:

<ion-menu [content]="content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <button ion-item menuToggle>
        Close Menu
      </button>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-nav #content [root]="rootPage"></ion-nav>

You will notice that we are using ion-menu to show a menu. We are also initializing Ionic navigation with rootPage. If you check app.component.ts, you will see that we are initializing rootPage to be equal to TabsPage, as shown here:

rootPage:any = TabsPage;

This is the key to using both a side menu and tabs on a single page:

Furthermore, we have added a segment on the second page of our application in about.html. The reason why I used segment alongside menu and tabs is that segment is very similar to tabs in terms of user experience. The user clicks on it and they see a different view/content, based on segment. But it is very much different from the tabs in Ionic. See the code following fragment from about.html:

<ion-segment [(ngModel)]="seg" color="danger">
      <ion-segment-button value="flame">
        <ion-icon name="flame"></ion-icon>
      </ion-segment-button>
      <ion-segment-button value="leaf">
        <ion-icon name="leaf"></ion-icon>
      </ion-segment-button>
  </ion-segment>

The preceding HTML code is for rendering the segment container and segment buttons. We link the segment with a seg property in our AboutPage class via ngModel. When the user clicks on any segment button, the property seg is initialized to the value of the segment button. In this example, the seg property can have a value of flame or leaf. Based on that value, we show content to the user in the other fragment of about.html, as shown in the following code block:

<div *ngIf="seg === 'flame'">
    <ion-card>
      <ion-card-header>
        Flame
      </ion-card-header>
      <ion-card-content>
        A flame (from Latin flamma) is the visible, gaseous part of a 
       fire. 
        It is caused by a highly exothermic reaction taking place in a     
       thin zone.
      </ion-card-content>
    </ion-card>
  </div>

  <div *ngIf="seg === 'leaf'">
     <ion-card>
      <ion-card-header>
        Leaf
      </ion-card-header>
      <ion-card-content>
        A leaf is an organ of a vascular plant and is the principal
        lateral appendage of the stem.
      </ion-card-content>
    </ion-card>
  </div>

You should also keep in mind that when you load the AboutPage, the value of the seg property will be undefined. So, in order to make a default selection, we have to initialize the value of the seg property in About.ts, as shown here:

seg:string = "flame";