Submenu on toolbar

[icangeek]

I’m trying to create a option like this on toolbar:

Another example:

Is there a CSS or JavaScript component I can use to achieve this function? or should I create this with custom html and css coding?

[emccorson]

The closest component is probably ons-popover.
https://onsen.io/v2/api/js/ons-popover.html

Two differences from your screenshots:

1. By default, it has an arrow pointing out the side but you can easily hide that with CSS.
2. The popover appears below the button, not on top of it. Again you can move this with CSS.

Here is an example similar to your screenshots using ons-popover:
https://codepen.io/emccorson/pen/gObyrYm

HTML:

<ons-page>
  <ons-toolbar>
    <div class="right">
       <ons-toolbar-button icon="ion-md-more" onclick="showPopover(this)"></ons-toolbar-button>
    </div>
  </ons-toolbar>
</ons-page>

<ons-popover id="popover" direction="down" cancelable="true">
  <ons-list>
    <ons-list-item>one</ons-list-item>
    <ons-list-item>two</ons-list-item>
    <ons-list-item>three</ons-list-item>
  </ons-list>
</ons-popover>

JS:

var showPopover = function(target) {
  document
    .getElementById('popover')
    .show(target);
};

var hidePopover = function() {
  document
    .getElementById('popover')
    .hide();
};