Menubars in QtQuick Controls 2

Question

How can I have Menubars in QtQuick Controls 2? It used to be like this (in ApplicationWindow):

menuBar: MenuBar {
    Menu {
        title: qsTr('File')
        MenuItem {
            text: qsTr('&Test')
            onTriggered: console.log('test')
        }
        MenuItem {
            text: qsTr('&Exit')
            onTriggered: Qt.quit();
        }
    }
}

But after upgrading to Qt 5.7 it gives this error: Invalid property name "menuBar".(M16)

P.S. it used to use device's native menu system, for example on OS X it used native screen's topbar menubar, on Linux and Windows it used native in application topbar menubar, etc.

Answer 1

MenuBar is now available, and was added in Qt 5.10. Use QtQuick.Controls version 2.3 or later:

import QtQuick.Controls 2.3

---

Old answer:

As GrecKo said, desktop is not the focus of the module, and as such, you won't find a MenuBar control as part of the main import. Up until recently, I've been using a RowLayout that contains a bunch of ToolButton controls, each of which opens a Menu, in order to emulate a menu bar for a desktop application.

However, the Qt.labs.platform module was recently added, which adds support for native controls like MenuBar. The types in this module are fully native, at the expense of less customisability. You can already start using these if you clone the dev branch of qtquickcontrols2.git.

By the way, if you're ever unsure what the equivalent type in Qt Quick Controls 2 is, there's a "Type Comparison Table" here (although it's unfortunately currently missing MenuBar).

Answer 2

I asked the same question on Qt blog announcing release of Qt 5.7 and this is their answer: http://blog.qt.io/blog/2016/06/16/qt-5-7-released/#comment-1197915

So seems that we should either wait for Qt 5.8 or clone the repo as Mitch suggested in his answer.

Update

This is now implemented in Qt Quick Controls 2: https://doc.qt.io/qt-5.10/qml-qtquick-controls2-menubar.html

Answer 3

The ApplicationWindow of Qt Quick Controls 2 doesn't have a menuBar property, it has been replaced by a more customizable header property that accepts Item (but it doesn't accept MenuBar anymore).

Qt Quick Controls 2 are not meant to offer a native desktop application, but are meant to offer simple, efficient and customizable components. For example in QQC2 you would use a ToolBar or a TabBar as the header of an ApplicationWindow.

Although it's not documented, it seems that just having a MenuBar as a child of an ApplicationWindow (in both QQC1 and QQC2) sets the native menu bar on OS X (not on Android though, and I haven't tested it on other platforms).

Answer 4

This functionality has been introduced for Controls2 in Qt 5.10. The interface is very similar, except MenuItems have been replaced by the more universal Action.

Documentation is here.

I realize this is an old question, but this might still be relevant for the passersby like me.

Answer 5

I just came across this question while dealing with this problem myself. Qt.labs.platform, as mentioned, doesn't work on Windows, and Qt.Quick.Controls 2 doesn't try to implement menus natively on anything. This is unsatisfying if you want actual system-native menus instead of custom QML objects.

The solution I've found is to import QtQuick.Controls 1 and use it just for the main window and menu bar. QML's import syntax makes this easy. 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
}

Now I can use all of modern Qt.Quick.Controls 2's fancy features and improvements, while effortlessly getting a native menu (at the top of the window for Windows, and at the top of the screen for Mac).

Note that for this to work, it's not enough to just declare the MenuBar; it has to be set as the menuBar property of the ApplicationWindow.