Ionic(v4) React Menu controller

Hi everyone,
I really need some help with this ion-controller things in React.
This is the issue:
I wanted to have a Menu (hamburger) which when I clicked on, open the Menu for me including pages I can navigate to.
I don’t know how should I use the open() on click event function in my IonButton components to be able to show my menu list. I tried a couple of ways but didn’t go anywhere.
Here is the code I wanted to use:

const Menu: React.FC = () => {
  
  return (
    <>
      <IonMenu side="start" menuId="first">
        <IonHeader>
          <IonToolbar color="primary">
            <IonTitle>Start Menu</IonTitle>
          </IonToolbar>
        </IonHeader>
        <IonContent>
          <IonList>
            <IonItem>Menu Item</IonItem>
            <IonItem>Menu Item</IonItem>
            <IonItem>Menu Item</IonItem>
            <IonItem>Menu Item</IonItem>
            <IonItem>Menu Item</IonItem>
          </IonList>
        </IonContent>
      </IonMenu>
      <IonHeader>
        <IonToolbar>
          <IonButtons slot="start"> 
            <IonMenuButton autoHide={false} onClick={() => DO Some magic with open() to open the IonMenu}></IonMenuButton>
          </IonButtons>
        </IonToolbar>
      </IonHeader>
      <IonRouterOutlet></IonRouterOutlet>
    </>
  )

Thanks for your help

Did you try using the CLI to make a side menu starter template? It works for me out of the box

The CLI menu template has the menu on the side which is always stays on the side and open, I need to have a menu sign which when I click on it appear on the side like the one in https://ionicframework.com/docs/api/menu example (the hamburger menu)

Then you want to check out the ion-split-pane docs, and use the when directive

Thanks @jjdev for suggesting the solution but this is not the one I’m looking for. Actually the ion-split-pane doesn’t work either for the scenario I’m looking for.
The issue is I don’t how I’m supposed to use “open” method on the ion-menu.
For Angular or JS, there are controller to be used to create a dynamic menu but for React I couldn’t get or find any examples to show the correct way to show how to use “open” method. I have the same issue with the “present” method on the ion-popover and popover handler

const menuCtrl = document.querySelector("ion-menu-controller");
menuCtrl.present()

Did you figure this out? I just cannot get an IonMenu to work in React.

@aaronksaunders “ion-menu-controller” doesn’t work in React. Instead of this, React has its own handler I guess, based on the “menu” example in Ionic site, which is “IonRouterOutlet” that is not working as well

@aej11 not really I try to do something like this but still no luck

const menuCtrl = document.querySelector("ion-router-outlet")
const MenuButton = () => (
  <IonPage>
    <IonMenu side="start" menuId="first">
        <IonHeader>
          <IonToolbar color="primary">
            <IonTitle>Start Menu</IonTitle>
          </IonToolbar>
        </IonHeader>
        <IonContent>
          <IonList>
            <IonItem>Menu Item</IonItem>
            <IonItem>Menu Item</IonItem>
            <IonItem>Menu Item</IonItem>
            <IonItem>Menu Item</IonItem>
            <IonItem>Menu Item</IonItem>
          </IonList>
        </IonContent>
  </IonMenu>
    <IonHeader>
      <IonToolbar>
        <IonButtons slot="start">
          <IonMenuButton autoHide={false} onClick={() => menuCtrl.open('first')}></IonMenuButton>
        </IonButtons>
        <IonTitle>Home</IonTitle>
      </IonToolbar>
    </IonHeader>
    <IonRouterOutlet id="first"></IonRouterOutlet>
  </IonPage>
)

export default MenuButton

I’m not sure exactly what you are trying to do either use the menu controller to control menus or use a button to open the menu.
If the second one is the case, this is the structure I am using that seems to work: Note the use of contentId=""

   <> 
       <IonMenu side="end" contentId="main-content" type="overlay">
          <IonHeader>
             <IonToolbar color="secondary">
                <IonMenuButton slot="end" color="primary" />
              </IonToolbar>
            </IonHeader>
            <MyMenuContent />
         </IonMenu>

        <IonPage id="main-content">
           <IonReactRouter>
              <IonRouterOutlet>
                 <Route path="/home" component={Home} exact={true} />
                 <Route exact path="/" render={() => <Redirect to="/home" />} />
              </IonRouterOutlet>
           </IonReactRouter>
        </IonPage>
    </>

const Home = () => {
   return(
   <>
      <IonHeader>
         <IonToolbar color="primary">
            <StyledLogo />
            <IonMenuButton slot="end" color="secondary" />
         </IonToolbar>
      </IonHeader>
      <IonContent className="ion-padding" slot="fixed">
         <IonGrid slot="fixed">
            <IonRow>
               <Main />
            </IonRow>
         </IonGrid>
      </IonContent>
   </>
      )
   }
3 Likes

Have you tried wrapping the button with <IonMenuToggle></IonMenuToggle> ?

IonMenuToggle docs

Thanks @AceLondon for your solution. I want exactly something like the menu instance on the https://ionicframework.com/docs/api/menu page (for ionic react platform), has a hamburger menu icon which once I clicked on it opens up the menu options for me on the side.
Could you please explain to me what “Home” does in your example?

I think you want

import { menuController } from '@ionic/core';

menuController.open()
6 Likes

thank you it helped to solve my problem

This helped! Thanks you

Exactly what I was looking for. Thanks!!

This is the only answer that shows how to use MenuController in react. Many thanks

This was soo cool :grinning:. Glad I read all the way down here.

I know this is an old post but the solutions above might not have worked for anyone else (like me). But after googling and trying a bit more, this one worked for me and might be useful for somebody else.

The contentId in the <IonMenu> must be the same as the id in the tag for the toolbar, which is <IonPage> in my example.

<IonMenu side="start" menuId="first" contentId="main-content">
  <IonHeader>
    <IonToolbar color="primary">
      <IonTitle>Start Menu</IonTitle>
    </IonToolbar>
  </IonHeader>
  <IonContent>
    <IonList>
      <IonItem>Menu Item</IonItem>
      <IonItem>Menu Item</IonItem>
      <IonItem>Menu Item</IonItem>
      <IonItem>Menu Item</IonItem>
      <IonItem>Menu Item</IonItem>
    </IonList>
  </IonContent>
</IonMenu>

<IonPage id="main-content">
  <IonHeader>
    <IonToolbar>
      <IonButtons slot="start">
        <IonMenuButton></IonMenuButton>
      </IonButtons>
      <IonTitle>Title</IonTitle>
    </IonToolbar>
  </IonHeader>
</IonPage>
1 Like

Thanks a ton!! this is a working solution!!