Align buttons in toolbar using Ionic with React

1
votes

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

1
reactjsionic-frameworkionic5

1 Answers

1
votes

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>