Set width of menu on split-pane

Hi, I’m looking a way to set the max-width of the SplitPane
The auto-size function is great, but I would like to set the “max-width” the side panel can reach. Because in big screens (for desktop of course) it gets really wide.
Screen Example:


1 Like

I’m also interested in it!


Does adding this ( as a work around for now ) work for you?

ion-menu {
    max-width: 200px!important;

Woow, I really need to improve mi CSS skill
Thanks! that was all that it takes.

It has the same effect on SidePanel, but i’m sure thar is a problem with that component. Ref:

As a reference, the base css for the menu is max-width: 28% and min-width: 270px. It is set directly in all three platforms .scss files for the component.

1 Like

Feature request here:

Your solution causes another problem.
This works better for me.

.split-pane-visible > ion-menu {
  max-width: 304px!important;


There is an official feature for this:


That way, on mobile devices the menu will look like below.

In the app.scss file I put the following code:

.md {
ion-menu {
    max-width: 15%!important;

Is there a way to change the menu only for Desktop devices?


Workaround for this problem:

I check in app.component.ts on the initializeApp () method which platform is running.


  initializeApp() {
    this.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.

      if ('core')) {
        this.renderer.setElementStyle(, "max-width", "100px");
export class MyApp implements OnInit {
  @ViewChild("menu") menu: any;

  constructor(public platform: Platform){


<ion-menu [content]="content" #menu>


ion-menu {
    // md
    // Show the split-pane when the min-width is 768px (default break point)
    max-width: 768px; 
  • If it is started in a Desktop Browser, the menu will be smaller with 100px, if it is other platforms it will set the default value.


As said above, there are now 2 SCSS variables that control the side pane width, namely:

$split-pane-side-max-width /* default: 28% */

However, the side and main pane widths are set through flex: 1, which means they try to have the same width. This is countered by $split-pane-side-max-width variable, but then we no longer have 3 parameters (min, width and max) but only 2 (min and max, width being always bigger than max).

To restore the situation, we have to modify the panes flex-grow property to a more suitable proportion, e.g.:

.split-pane-visible >.split-pane-side {
  flex-grow: 28;
.split-pane-visible >.split-pane-main {
  flex-grow: 72;
/* This proportion keeps the same behaviour as default,
but through flex instead of relying on max-width */

Now the width of the side pane is still 28% of the screen, but we can use absolute units for the max, so that the side pane does not grow too big on big screens:

.split-pane-visible >.split-pane-side {
  min-width: 200px; /* Default: 270px */
  max-width: 304px; /* Same as when menu opens in mobile mode */

///in app.scss

ion-menu {
max-width: 10%!important;
max-width: 80%!important;

1 Like

This is my workaroud in ionic 5

ion-menu::part(container) {
  max-width: 150px!important;