Search code examples
reactjsionic-frameworkionic5

Align buttons in toolbar using Ionic with React


How do I align the back button to the left and the hamburger menu icon to the right of the toolbar. Could anyone please help?

<IonToolbar mode="ios">
  <IonButtons slot="start">
    <IonBackButton defaultHref={route} />
    <IonMenuButton color="dark" />
  </IonButtons>
  <IonTitle>
    App Title
  </IonTitle>
</IonToolbar>

Current result

image


Solution

  • Simply add an other IonButtons and give a slot property on it ( either start or end ). That should align your buttons in the toolbar.

    <IonToolbar mode="ios">
      <IonButtons slot="start">
        <IonBackButton defaultHref={route} />
      </IonButtons>
      <IonButtons slot="end">
         <IonMenuButton color="dark" />
      </IonButtons>
      <IonTitle>
        App Title
      </IonTitle>
    </IonToolbar>