The Official Ionic Blog

Build amazing native and progressive web apps with HTML5

Screen Shot 2017-02-16 at 19.18.25

Over the last month, Manu has been working hard on adding an oft-requested and powerful new feature to Ionic apps: Split Panel.

With Split Panel, it’s now easy to show a responsive side menu with side-by-side navigation controllers that will display on larger screens (such as the iPhone 7 plus, tablets, and desktops) and collapse
on small screens (such as portrait mode on most smartphones). With independent navigation controllers, the menu side of the split panel can navigate independently of the content side, or they can work in concert. Finally, the menu side can be fixed or displayed as a side menu.

Feb-16-2017 19-15-43

To help test, install the latest nightly of Ionic (npm install --save ionic-angular@2.0.1-201702161925). For basic usage, simply wrap your <ion-menu> and <ion-nav> with the new <ion-split-panel> component:

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

See the e2e tests for a full example of advanced usage (API Docs coming soon). Note: Split Panel is only available on Ionic 2.x and above.

  • giorgiofellipe

    What a nice feature 🚀

  • Manu Martinez-Almeida

    Here’s a quick video showing our demo “conference app” as a universal app!
    https://www.dropbox.com/s/40i9q7re3p2kfjl/Video%2016-02-2017%2C%2020%2043%2016.mp4?dl=0

  • brandecho

    Currently working on project using Ionic ver1. If we upgrade Ionic to ver2 using npm install, will Ionic version 1 code still work?

  • Felipe M Andrada

    Very nice!

  • Daniel Marc Ehrhardt
  • http://danjesus.github.io Dan Jesus

    Nice job!

  • Tom McLellan

    Nice!!! Excited to give it a try

  • Jiyuu

    Nice to see new features dedicated to tablets (!) and desktops!
    Is it possible to manage an app menu + this new split pane view? (which a final result that would behave like that: http://blog.scottlogic.com/wreilly/assets/ionic-master-detail/master-detail-example.png)?

    Thanks for your hard work!

    • Manu Martinez-Almeida

      Of course, but we still have to figure out how we can make it easy by adding some assistance in NavController. That’s why we ask you developers to play with it, what things are working, and which ones are not.

      • Jiyuu

        Okay I’ll try to test it during the weekend. Our app uses Ionic 1, I’ve never played with Ionic 2 yet.

  • http://www.brightwood.nl Wouter van Lent

    Amazing Manu! Thanks a lot!

  • tiptronic

    Has this a hard dependency on Angular?

    • Manu Martinez-Almeida

      what do you mean?

  • tiptronic

    Anyway – great stuff! Thanks for making that!

  • inkout

    What calendar do you use in gif?

    • Anil Kaushik

      Its the new ” DateTime picker” of ionic 2. First you should read the ionic 2 docs.

  • Razaleigh Wiseman

    Great!! This will great in progressive web app

  • Lukas

    This looks awesome, I was already annoyed because it’s hard to use a wide screen.
    Is it possible to push page to different navcontrollers?
    like som things open in the side panel and some in the main are. I’d love that

    • Manu Martinez-Almeida

      absolutely, you can have as many ion-nav as you need!

      • Lukas

        But how do I get one back, injecting doesn’t let me choose

  • Oskar Gembalski

    Great feature! I was waiting for it! Is there any way to hide menu (panel) on big screens – I need it on login page.
    this.menuCtrl.enable(false); doesn’t work….

  • Aofzide Csiperos

    Cool!!! How can I test it?

  • Paulo Mateus

    Hello, is there anything like android fragments?
    https://developer.android.com/images/fundamentals/fragments.png?hl=en