Ionic – Split Pane Layout

Table of Contents

Code

The Component

				
					<!-- can be "xs", "sm", "md", "lg", or "xl" -->
<ion-split-pane when="md"></ion-split-pane>

<!-- can be any valid media query https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries -->
<ion-split-pane when="(min-width: 40px)"></ion-split-pane>
				
			
				
					<ion-split-pane contentId="main">
  <!--  the side menu  -->
  <ion-menu contentId="main">
    <ion-header>
      <ion-toolbar>
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>
  </ion-menu>

  <!-- the main content -->
  <ion-router-outlet id="main"></ion-router-outlet>
</ion-split-pane>
				
			

If you want a open/close butten for Desktops

				
					<ion-buttons slot="start">
      <ion-menu-toggle autoHide="false" menu="main-menu">
        <ion-button (click)="toggleMenu()">
          <ion-icon name="menu" slot="icon-only"></ion-icon>
        </ion-button>
      </ion-menu-toggle>
				
			
				
					import { SIZE_TO_MEDIA } from '@ionic/core/dist/collection/utils/media'



  toggleMenu() {
    const splitPane = document.querySelector('ion-split-pane');

  if(window.matchMedia(SIZE_TO_MEDIA[splitPane.when] || splitPane.when).matches)
  splitPane.classList.toggle('split-pane-visible')
}