bug: v7 => v8 Ion-split-pane + another ion-menu doesn’t work anymore #30591

Activity

1. ionitron-bot

   added

   triage

   on Aug 1, 2025
2. tbarrosocalaosoft commented on Sep 12, 2025

   

   tbarrosocalaosoft

   on Sep 12, 2025

   More actions

   Same here, any workaround?
3. tbarrosocalaosoft commented on Sep 12, 2025

   

   tbarrosocalaosoft

   on Sep 12, 2025

   More actions

   Bug from #28801.
4. lydongray commented on Sep 19, 2025

   

   lydongray

   on Sep 19, 2025

   Last edited by lydongray

   More actions

   I too just noticed this after upgrading from v7 to v8. Is there a workaround for this?
   FYI - the menus work perfectly in small screen mode. It only stops working when the split pane side menu is automatically set to visible.
5. lydongray commented on Sep 19, 2025

   

   lydongray

   on Sep 19, 2025

   More actions

   I need this fixed right now so here's a dirty hack I came up with:

   I created this little useMediaQuery hook that will watch the size of the screen and react accordingly.

   import { useState, useEffect } from 'react';
   
   const useMediaQuery = (query: string): boolean => {
     const [matches, setMatches] = useState(false);
   
     useEffect(() => {
       const media = window.matchMedia(query);
       if (media.matches !== matches) {
         setMatches(media.matches);
       }
       const listener = () => setMatches(media.matches);
       media.addEventListener('change', listener);
       return () => media.removeEventListener('change', listener);
     }, [matches, query]);
   
     return matches;
   };
   
   export default useMediaQuery;
   

   Make the split pane never display the menu and programmatically add split-pane-visible class when we hit the desired breakpoint.

   const showSpitPane = useMediaQuery('(min-width: 992px)');
   <IonSplitPane contentId="main" className={showSpitPane ? 'split-pane-visible' : ''} when={false}>
   

   We also need to do a simlar thing with the split panes IonMenu. Add the menu-pane-visible class programmatically.

   const showSpitPane = useMediaQuery('(min-width: 992px)');
   <IonMenu menuId="main-menu" contentId="main" type="overlay" className={showMenuPane ? 'menu-pane-visible' : ''}>
   

   I also have menu buttons about the app that are there to open the main menu of the split pane. We need to hide this button on large screens.

   @media screen and (min-width: 992px) {
       ion-menu-button {
         display: none;
       }
     }
   

   This is a little clunky but I need a solution and don't have any time to waste on this.
6. thetaPC commented on Oct 15, 2026

   

   thetaPC

   on Oct 15, 2026

   Contributor

   More actions

   Thanks for the report, and sorry for the delay.

   Verified on 9.0.8. Since v8, ion-menu treats any menu anywhere inside an ion-split-pane as one of the split pane's side panes, not only its direct children. Your second menu lives inside the page rendered by ion-router-outlet, so while the split pane is visible it is laid out as a hidden pane and menuController.open('second-menu') does nothing. On small screens the split pane is collapsed, which is why it works there.

   Workaround, verified on 9.0.8: move the second menu out of ion-split-pane so it sits beside it, and point its content-id at the router outlet. The page can keep calling menuController.open('second-menu') unchanged.

   <template>
     <ion-split-pane when="xs" content-id="main-content" style="--side-max-width: 200px">
       <ion-menu id="main-menu" content-id="main-content">
         <ion-header>
           <ion-toolbar>
             <ion-title>Menu Content</ion-title>
           </ion-toolbar>
         </ion-header>
         <ion-content class="ion-padding">This is the menu content.</ion-content>
       </ion-menu>
   
       <ion-router-outlet id="main-content" />
     </ion-split-pane>
   
     <ion-menu menu-id="second-menu" side="end" type="overlay" content-id="main-content">
       <ion-header>
         <ion-toolbar>
           <ion-title>Second Menu</ion-title>
         </ion-toolbar>
       </ion-header>
       <ion-content class="ion-padding">This is the second menu content.</ion-content>
     </ion-menu>
   </template>
   
   <script setup lang="ts">
   import { IonContent, IonHeader, IonMenu, IonRouterOutlet, IonSplitPane, IonTitle, IonToolbar } from '@ionic/vue';
   </script>

   The earlier workaround that sets when={false} and adds the visibility classes by hand does open the second menu, but it leaves the main menu in overlay mode: menuController.open() still treats it as a closed menu and "opens" it while it is already on screen. The layout above avoids that.

   Tracked as a bug in core.
7. thetaPC

   added

   package: core@ionic/core package@ionic/core package

   type: buga confirmed bug reporta confirmed bug report

   on Oct 15, 2026
8. ionitron-bot

   removed

   triage

   on Oct 15, 2026
9. ShaneK

   closed this as completedin #31586on Oct 21, 2026
10. opensource-fork-sync

    added a commit that references this issue on Oct 21, 2026

    fix(menu): allow menus inside split pane main content to open (ionic-…

    ...

    This issue will close once commit 3eebee3 is merged into the 'main' branch.

    3eebee3