In this post, I am going to dig a little deeper into working with the new Ionic Split Pane component. I explored it some in this post. There are three elements I want to explore: a full header design, understanding how to navigate pages, and handling resizing.
Full Header Design
Several readers asked about how you might achieve this design:

A full header Ionic Split Pane
After playing around with different variations of the component structure and encountering some navigation troubles, I settled on using a basic CSS approach to this design.
The app.html is a standard component (sorry spacing with the brackets, blame WordPress):
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<ion-split-pane> | |
<ion-menu [content]="content"> | |
<ion-header> | |
<ion-toolbar> | |
<ion-title>{{title}}</ion-title> | |
</ion-toolbar> | |
</ion-header> | |
<ion-content> | |
<ion-list> | |
<ion-item detail-push *ngFor="let project of projects" (click)="projectSelected(project)"> | |
{{ project.name }} | |
</ion-item> | |
</ion-list> | |
</ion-content> | |
</ion-menu> | |
<!– main navigation –> | |
<ion-nav [root]="rootPage" #content swipeBackEnabled="false" main></ion-nav> | |
</ion-split-pane> |
This should look very close the documentation from Ionic. All we need to do is update the app.scss file with two changes:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.split-pane-visible > .split-pane-side { | |
border-right: none !important; | |
} | |
.menu-inner ion-content { | |
border-right: 1px solid #dedede; | |
} |
Handling Resizing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Component, ViewChild } from '@angular/core'; | |
import { Events, MenuController, Nav, Platform } from 'ionic-angular'; | |
import { StatusBar, Splashscreen } from 'ionic-native'; | |
import { MainPage } from '../pages/main/main'; | |
import { MercuryPage } from '../pages/mercury/mercury'; | |
import { GeminiPage } from '../pages/gemini/gemini'; | |
import { ApolloPage } from '../pages/apollo/apollo'; | |
import { AstpPage } from '../pages/astp/astp'; | |
import { SkylabPage } from '../pages/skylab/skylab'; | |
import { ShuttlePage } from '../pages/shuttle/shuttle'; | |
import { OrionPage } from '../pages/orion/orion'; | |
@Component({ | |
templateUrl: 'app.html' | |
}) | |
export class MyApp { | |
@ViewChild(Nav) nav: Nav; | |
rootPage: any; | |
projects: Array<any> = []; | |
title: String = 'Projects'; | |
menuToggleState: Boolean = false; | |
constructor(public menuCtrl: MenuController, public platform: Platform, public events: Events) { | |
this.rootPage = MainPage; | |
this.projects = [ | |
{ name: 'Mercury', details: MercuryPage }, | |
{ name: 'Gemini', details: GeminiPage }, | |
{ name: 'Apollo', details: ApolloPage }, | |
{ name: 'Skylab', details: SkylabPage }, | |
{ name: 'ASTP', details: AstpPage }, | |
{ name: 'Space Shuttle', details: ShuttlePage }, | |
{ name: 'Orion', details: OrionPage } | |
] | |
platform.ready().then(() => { | |
// Okay, so the platform is ready and our plugins are available. | |
// Here you can do any higher level native things you might need. | |
StatusBar.styleDefault(); | |
Splashscreen.hide(); | |
this.platform.width() < 768 ? this.menuToggleState = true : this.menuToggleState = false; | |
}); | |
} | |
projectSelected(theProject) { | |
this.nav.setRoot(theProject.details); | |
this.menuCtrl.close(); | |
} | |
updateTitles() { | |
this.platform.width() < 768 ? this.menuToggleState = true : this.menuToggleState = false; | |
this.events.publish('title:updated', { menuState: this.menuToggleState }); | |
} | |
} |
We define a menuToggleState boolean to hold our pane’s visible state. This variable is set once the platform is ready. We have hard code the breakpoint to match the split panes. If you change that value, you will need to update it here as well.
The key to this solution is using the Ionic Events module to broadcast this value upon a state change triggered by the IonChange event. When that event occurs, we check the new width, and determine of the pane is now showing or not. Then we publish our custom event throughout our Ionic app.
In each page that is shown with the main content, I adjusted a few items. First, I had the title component is bound the title variable.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
< ion-header > | |
< ion-navbar > | |
< button ion-button menuToggle >< ion-icon name="menu" >< /ion-icon >< /button > | |
< ion-title >{{title}}< /ion-title > | |
< /ion-navbar > | |
< /ion-header > |
When we do not want a title visible, we set this variable to hold a space, rather than an empty string. The reason for this is, without content in the node, Ionic did not properly display any header icons. We also include a button that will auto display our hamburger menu icon when the split pane is hidden, giving us access to that content.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Component } from '@angular/core'; | |
import { Events, NavController, NavParams } from 'ionic-angular'; | |
@Component({ | |
selector: 'page-mercury', | |
templateUrl: 'mercury.html' | |
}) | |
export class MercuryPage { | |
title: String = ' '; | |
constructor(public events: Events, public navCtrl: NavController, public navParams: NavParams) { | |
events.subscribe('title:updated', (data) => { | |
if (data.menuState) { | |
this.title = "Projects"; | |
} else { | |
this.title = ' '; | |
} | |
}); | |
} | |
} |
This is for the Project Mercury page, each NASA project page has the similar event subscriber included in its constructor. For this sample, I did not rework this into a custom component to properly encapsulate the code as to not need to repeat so much of it across all these pages. The basic structure of the code listens for the event from the master component and depending on the state updates the title variable.
Now when I resize the window smaller than the breakpoint, the title is updated on the main content pages. Here is what it looks like when resized:
and the menu being displayed:
Page Navigation
Another tricky part of working with the split pane is understanding how to navigate pages. It was this issue that forced me to abandon several other attempts at a full header design. The heart of updating the main content from the pane is to use the @ViewChild.
Within the class for the app, we define our ViewChild to come from our root NavController using @ViewChild(Nav) nav: Nav;
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
projectSelected(theProject) { | |
this.nav.setRoot(theProject.details); | |
this.menuCtrl.close(); | |
} |
Navigation within the Main Content

This not work with previous post… Please explain how to push a page in main content inside sidenav. ViewChild isn’t working.
Thanks!
Are you asking how to navigate the content in the split pane (aka sidemenu), or how to have the split pane update the main content view?
First, thanks for answer.
I’m asking how to have the split pane update the main content view. I want a multilevel sidemenu like previous post with split pane, there are options in menu that updates sidemenu and options that must update content.
P.D.: Sorry for my English!
And the best answer in the moment is…
in my case, in MyApp:
this.platform.ready().then(() => {
this.navProvider.setNav(this.nav);
this.navProvider.setContent(this.content);
});
And where ever:
this.navProvider.getContent().setRoot or push or what ever you want!
Do you have something better?
Hi.
I am facing the excat same problem. I can’t quite understand your solution….
what type is “this.navProvider”?
Why am I not seeing the Hamburger Icon when the split pane is collapsed any ideas? Regards
Are you including this on the main content pages’ header:
NASA