Split Pane Layout

Ionic – Hide Scrollbar

Table of Contents


Hide Scrollbar

					ion-content {
  --offset-bottom: auto!important; //for Scroll ability
  --overflow: hidden;
  overflow: auto;
  &::-webkit-scrollbar {
    display: none;
  // width: calc(100% + 15px);

Custom Scrollbar

					ion-content {
  --offset-bottom: auto !important; // for scroll ability
  --overflow: hidden;               // scrollbar hidden
  overflow: auto;                   
  &::-webkit-scrollbar {
    width: 0.25rem;
  &::-webkit-scrollbar-track {
    background: #1e1e24;
  &::-webkit-scrollbar-thumb {
    background: #4444b4;

Ionic – Split Pane Layout

Table of Contents


The Component

<ion-split-pane when="md"></ion-split-pane>

<ion-split-pane when="(min-width: 40px)"></ion-split-pane>
					<ion-split-pane contentId="main">
  <ion-menu contentId="main">

  <ion-router-outlet id="main"></ion-router-outlet>

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>
					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)