Is it possible to show tabs in side menu pages?

Ionic Framework ionic-v3
1

I tried to find a way to show tabs in side menu pages. it is easily possible to show side menu on tabs page but in side menu pages I couldn’t show tabs.
all examples shows that two different things side menus are the same pages tat tabs references. or like mine code tabs are showing side menus but side menus page could not the tabs.

Any idea is how to solve it, I couldn’t find any way.

1 Like
2

I have the same problem. Have you found a solution?

3

No but I found that structurally seems it is impossible. you can show side menu in tab pages but when using side menu it completely different route and navigation using. regarding to tabs.ts and html

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {
  // this tells the tabs component which Pages
  // should be each tab's root Page
  tab1Root: any = HomePage;
  tab2Root: any = AboutPage;
  tab3Root: any = ContactPage;

  constructor() {

  }
}

tabs.html
< ion-tabs>
< ion-tab [root]=“tab1Root” tabTitle=“Home” tabIcon=“home”>
< ion-tab [root]=“tab2Root” tabTitle=“About” tabIcon=“information-circle”>
< ion-tab [root]=“tab3Root” tabTitle=“Contact” tabIcon=“contacts”>
< /ion-tabs>

this is completely separated from what we define as a side menue in app.html:

< ion-menu [content]="content">
  < ion-header>
    < ion-toolbar>
      < ion-title>Menu</ion-title>
    < /ion-toolbar>
  < /ion-header>
  < ion-content>
    < ion-list>
      < button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
        {{p.title}}
      < /button>
    < /ion-list>
  < /ion-content>

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

and app.component.ts
this.pages = [
{ title: ‘Page One’, component: Page1 },
{ title: ‘Page Two’, component: Page2 }
];

4

Try Setting below in your launch page.ts (launch page is a root page set at apps.component.ts file ) file.

this.navCtrl.setRoot(MenuTogglePage);

For example: my launch page is login page of app. Once I login, above code will set root page as MenuTogglePage (menutoggle page is a page where I defined my code for side menu).

Also it has nothing to do with Tabs Page. So none changes are required in that files.

1 Like
5

Root page is set to tabspage.ts:

import { Component } from '@angular/core';
import { Page1 } from '../pages/page1/page1';
import { Page2 } from '../pages/page2/page2';
import { NavController } from 'ionic-angular';

import { HomePage } from '../home/home';
import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {
  // this tells the tabs component which Pages
  // should be each tab's root Page
  tab1Root: any = HomePage;
  tab2Root: any = AboutPage;
  tab3Root: any = ContactPage;

  constructor( public navCtrl: NavController ) {
  }
}

tabs.html

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>

and by default tab1root goes to homepage
home.html

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>home</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <h2>Welcome to Ionic!</h2>
  <p>
    This starter project comes with simple tabs-based layout for apps
    that are going to primarily use a Tabbed UI.
  </p>
  <p>
    Take a look at the <code>src/pages/</code> directory to add or change tabs,
    update any existing page or create new pages.
  </p>
</ion-content>

home.ts
import { Component } from ‘@angular/core’;

import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {

  }

}

As I said navigation from side menu is completely independent of tabs menu. it is easy to show side menu in tabs page but wen changing page to side menu’s pages it will not show back button or tabs menu below the page.

2 Likes
6

Any answer for this?

1 Like
7

This seems to work for me to have a global sidemenu that works in all tabs.

<ion-menu [content]="tabs">
  <ion-content>
      <ion-list>
        <ion-item>Logout</ion-item>
      </ion-list>
  </ion-content>
</ion-menu>

<ion-tabs #tabs>
  <ion-tab [root]="homeRoot" tabTitle="People" tabIcon="people"></ion-tab>
  <ion-tab [root]="mapRoot" tabTitle="Map" tabIcon="map"></ion-tab>
</ion-tabs>
8

It simply can not work with standard implementation of ionic2. You’ll need to create your own version of the menu. Sad fact that ionic team failed to foresee this major major use case for side-menu and tabs.

9

Footer is one possible way. but it is not hearty for me.

10

Can you elaborate how you would do this in the ionic conference app?