ONSEN-UI Adding more than three buttons on the toolbar

Question

I want to add multiple buttons on the toolbar when I add more than two buttons on the toolbar the buttons don't appear. I want to add buttons on the toolbar like in this image.

<ons-toolbar fixed-style>
  <div class="left">
    <ons-toolbar-button ng-click="menu.toggle()">
      <ons-icon style="color:#fff" icon="ion-navicon-round" size="28px" fixed-width="false"></ons-icon>
    </ons-toolbar-button>
  </div>


  <div class="right">
    <ons-toolbar-button>
        <button style="color:#fff" class="button button--quiet" ng-click="shareAnywhere()"><i class="ion-android-share-alt"></i>
        </button>
    </ons-toolbar-button>
  </div>

</ons-toolbar>

Answer 1

You can write all the buttons you want inside the divs with the position class:

<ons-toolbar>
    <div class="left">
        <ons-toolbar-button> A </ons-toolbar-button>
        <ons-toolbar-button> B </ons-toolbar-button>
    </div>

    <div class="centre">
        Title
    </div>

    <div class="right">
        <ons-toolbar-button> C </ons-toolbar-button>
        <ons-toolbar-button> D </ons-toolbar-button>
        <ons-toolbar-button> F </ons-toolbar-button>
    </div>
</ons-toolbar>

Check it here: http://codepen.io/frankdiox/pen/oXYXaP

Hope it helps!