CODEWITHSUNDEEP
reactjsionic-frameworkionic5
scriobh
scriobh

Reputation: 890

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

Upvotes: 1

Views: 288

Answers (1)

krsna
krsna

Reputation: 4333

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>

Upvotes: 1

Related Questions