Is there any way that the menu button is inside one of the tabs as shown in the image, I have searched in several forums and I only find that the button dle mene places it at the top in the header, but none that the menu button is one of the options of the tabs

CodePudding user response：

Create your project with tabs. ionic start projectName tabs

Update your app.component.html with below Code:

<ion-app>
  <ion-split-pane contentId="main-content" when="false">
    <ion-menu contentId="main-content" type="overlay">
      <ion-content>
        <ion-list>
          <ion-list-header>Inbox</ion-list-header>
          <ion-note>[email protected]</ion-note>
          <ion-menu-toggle autoHide="false" *ngFor="let p of pages">
            <ion-item [routerLink]="[p.url]" routerLinkActive="selected" routerDirection="root" lines="none" detail="false">
              <ion-icon slot="start" [ios]="p.icon   '-outline'" [md]="p.icon   '-sharp'"></ion-icon>
              <ion-label>{{ p.title }}</ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>
      </ion-content>
    </ion-menu>
    <ion-router-outlet id="main-content"></ion-router-outlet>
  </ion-split-pane>
</ion-app>

update your app.component.ts

pages = [
    {
      title: 'Login',
      url: '/tabs/tab1',
      icon: 'log-in'
    },
    {
      title: 'Contact',
      url: '/tabs/tab2',
      icon: 'person'
    },
    {
      title: 'About',
      url: '/tabs/tab3',
      icon: 'information-circle'
    }
  ];

For Complete demo repository based on Ionic 5: https://github.com/Saqib92/ionic5-tabs-sidemenu

CodePudding user response：

First create your ionic application with tabs In app.component.html just add this code

<ion-app>
  <ion-split-pane contentId="main-content" when="false">
    <ion-menu contentId="main-content" type="overlay">
      <ion-content>
        <ion-list>
          <ion-list-header>Inbox</ion-list-header>
          <ion-note>[email protected]</ion-note>
          <ion-menu-toggle autoHide="false" *ngFor="let p of pages">
            <ion-item [routerLink]="[p.url]" routerLinkActive="selected" routerDirection="root" lines="none" detail="false">
              <ion-icon slot="start" [ios]="p.icon   '-outline'" [md]="p.icon   '-sharp'"></ion-icon>
              <ion-label>{{ p.title }}</ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>
      </ion-content>
    </ion-menu>
    <ion-router-outlet id="main-content"></ion-router-outlet>
  </ion-split-pane>
</ion-app>

add pages array in app.component.ts and customize your pages

pages = [
    {
      title: 'Login',
      url: '/tabs/tab1',
      icon: 'log-in'
    },
    {
      title: 'Contact',
      url: '/tabs/tab2',
      icon: 'person'
    },
    {
      title: 'About',
      url: '/tabs/tab3',
      icon: 'information-circle'
    }
  ];

In tabs-routing.module.ts just add a new route "tab4" and do not give any children or loadchildren property like this. If you do not give tab 4 in route then it will show error

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';

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: 'tab4',
      },
      {
        path: '',
        redirectTo: '/tabs/tab1',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/tab1',
    pathMatch: 'full'
  }
];

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

then in your tabs.page.html add this code

<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-button tab="tab4">
      <ion-menu-button></ion-menu-button>
    </ion-tab-button>

  </ion-tab-bar>

</ion-tabs>

Comment or remove <ion-menu-button></ion-menu-button> from your pages header

If you do not understand anything let me knnow and I will create and share a github repo with you with proper project structure