Search code examples
qtqmlqt-quickqtquickcontrols

qml: achieve a chrome-like menu


I would like to achieve with QML a menu with a single menu item, like chrome does it. It has this button with those three horizontal bars and when you click it you get a single menu. Recent versions of firefox also follow the same principle. It allows not to waste too much horizontal space in the GUI of the application, unline usual menus which take up the whole width of the window.

I did not manage to reproduce exactly this GUI with QML. From what I saw you can either use a QML ApplicationWindow, and then a MenuBar, but then it takes the whole width of the window... Or have a toggle button to trigger the menu, then use a standalone Menu and its popup() method, but then it pops-up directly under the cursor, not exactly under the button to open the menu, which doesn't look good. That's really more abusing the mechanism for a context menu.

I could make a fake menu which would be a custom widget in my window but then it could not expand beyond my application window. Such a behaviour is almost required because I'll put this button on the far right of the window, as chrome does it.

Is it possible to achieve exactly that behaviour in pure QML (no C++)?


Solution

  • What I did for now is the last option that I mentioned: fake menu in the window. It's drawing using the canvas which enables me to make it a little pointy arrow from the menu to the menu toggle button, as done also by firefox.

    The minus as I said is that the menu cannot go out of the window, plus everything is very manual (mouseover effect for menu items...), so I'm still interested in other solutions.

    EDIT: ok after some time I realized a big plus of my approach: I can put custom widgets, not only labels in the menu. So I think it's absolutely the right approach now.