SplitPane not showing sidemenu

Ionic Framework ionic-v3
1

Hi,

I’m trying to use SplitPane component to automatically show sidemenu on large screens.

I start from sidemenu template like this:

ionic start SplitPaneTest sidemenu

Then, I’ve modified /src/app/app.html code to match this:

Added split pane component to my root component and added main attribute to my ion-nav, no more changes.

<ion-split-pane>
  <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-split-pane>

<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content main swipeBackEnabled="false"></ion-nav>

When I run ionic serve the sidemenu is not showing:

image
image1145×888 22.3 KB

I’m doing something wrong?

Related Github Issue:

Any help will be appreciated.

Thanks in advance!

2

Try to add a menu toggle button to your header

<ion-toolbar>
  <button ion-button menuToggle right>
    <ion-icon name="menu"></ion-icon>
  </button>
  <ion-title>
       Title
       ......
3

I already have this menu toggle button on my pages/home/home.html file:

<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>
  <h3>Ionic Menu Starter</h3>

  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will show you the way.
  </p>

  <button ion-button secondary menuToggle>Toggle Menu</button>
</ion-content>
4

Take a look at the linked github.

I use it for http://jacktools.net

5

Thanks @Jacktoolsnet.

I tried your template and works well and helped me to find my mistake.

The ion-nav component must be inside splitpane, just like this:

<ion-split-pane>
  <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 MUST BE INSIDE ION SPLIT PANE -->
  <ion-nav [root]="rootPage" #content main swipeBackEnabled="false"></ion-nav>

</ion-split-pane>
6

@ramon You’re welcome!

7

@ramon and @Jacktoolsnet
Hello! several years later, this solution worked for Ionic v5 with angular v10. It took me too long to find the solution and this answer has been very useful to me.
I changed my to and it works.
Maybe it’s a bit more complex in my case, because I was using the in a tousable component, and the broke my program on the URL. Thank you! and I hope it will serve the community.