Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

How do I get the MenuBar from QML to become Mac OS's native platform menu bar



  • I am trying to re-write a code I wrote using purely C++ Qt to be QML/Qt Quick based.
    However I am failing at the very start because I cannot get the menu bar to become the native top-of-the-screen menu bar expected in Mac OS X.

    In the old app, I used to simply call from C++:

    menubar->setParent(nullptr);

    and that did the job. Now I tried to do:

    menubar.parent = null

    in javascript, but all it does is to make the menu bar disappear from the application window.

    In the 5.10 documentation of MenuBar, it shows a Mac image as an example. In 5.13, that is not shown anymore. Has this become impossible?



  • In QML visual object should have visual parent to be shown, otherwise there is no drawing context for such item and it will be never visible.



  • @intruderexcluder Are you implying that what I am trying to do will not work and that the only way to get the MacOS MenuBar is to use the old C++ MenuBar Widget? Or is there another way of putting the QML MenuBar in the system top bar?



  • @Fun-Miles You're probably looking for the menu bar from Qt.labs.platform



  • @fkosmale You are right. It looks like that's what I am looking for.
    It's a bit confusing to have several MenuBar in QML and seeing how the docs are similar, I didn't notice that my mention of 5.10 was for that same MenuBar.



  • @fkosmale One more question, as it may help others who may stumble on this thread:
    I am now able to create the Mac OS's menu bar using that particular Qt.labs.platform MenuBar object.
    Some Linux environment will also have such a system menu-bar. But Windows and other Linux environments will not. In such cases, the menu bar is expected to be at the top of the main application window.
    In the old Widget world, I simply created my menu bar there and for Mac OS, used the line I gave in my initial post to put it at the top of Mac OS's screen when running on Mac.

    What is the recommended way to create a code that will feel native on any environment? Do I need to repeat the MenuBar code and call the Qt.labs.platform version when I detect I am in an environment that supports it while using the QtQuick.controls otherwise?
    It's not too desirable to duplicate code though.... (DRY)

    Once I have a satisfactory to that question, I can mark my question as answered.



  • I know this is an old topic, but I had this same question. I found a workaround, and thought someone else Googling for an answer might find it helpful.

    In QtQuick.Controls 1, MenuBar QML type attached as an ApplicationWindow's menuBar property uses system-native menu bars (which will be at the top of the window for Windows, and the top of the screen for Mac). It's possible to import QtQuick.Controls 1 just for the main window and menubar while still using modern QtQuick.Controls 2 for its widgets.

    For example:

    import QtQuick.Controls 2.12
    import QtQuick.Controls 1.2 as OldControls
    
    OldControls.ApplicationWindow {
    	visible: true
    	
    	menuBar: OldControls.MenuBar { // Should attach natively
    		OldControls.Menu {
    			title: 'File'
    			OldControls.MenuItem {
    				text: 'New'
    				shortcut: StandardKey.New
    				onTriggered: context.new()
    			}
    		}
    	}
    	
    	Button { ... } // QtQuick.Controls 2 version
    }
    

Log in to reply