Custom Menu Bar

I’m using a menubar, in order to create a dropdown list with chechbox, with a select and deselect all.
The result is pretty good (you can see the attached image), but I need a little improvement.
The menubar gives the possibilities to add an image for each item (I’ve used this to add the arrow icon), but only on the left side, there is some method which I can use to have that on right (like in the second image)?
The other question is about the behaviour of the menubar, once I select an Item, the menu bar automatically close, how can I leave that open?


You can move the icon on the right with “direction: rtl” in CSS:

.v-menubar-popup .v-menubar-menuitem { direction: rtl; } The result is just not very pretty, as the text is aligned left. You could use “text-align: right” for the above rule. You could also use “float: right” for the img element inside the menu item.

Something like this:

.v-menubar-menuitem .v-menubar-menuitem-caption {
  direction: rtl;

  img {
    float: right;
    padding-left: 20px;
    padding-top:  6px;

It works!! thank you.
Regarding the auto close behaviour? You have any hint?
I’ve looked throught the manu bar api, but I haven’t find nothing useful :frowning:

I don’t think it’s in any way possible in the server-side API. Probably the only way is to extend MenuBar on the client-side and override the doItemAction() method.