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.

Please try to post a complete example... What is your root element? What are your imports? If using `ApplicationWindow` the property seems to exists in 5.7... (http://doc.qt.io/qt-5.7/qml-qtquick-controls-applicationwindow.html#menuBar-prop). — maxik, Jun 17 '16 at 06:59

score 7 · Answer 1 · edited Feb 13 '19 at 18:48

7

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).

edited Feb 13 '19 at 18:48

Community

1
1

answered Jun 17 '16 at 08:42

Mitch

23,716
9
83
122

Well I'm using Qt so that I can write once and use it everywhere. I was able to have native menubars in every platform that supported it with QtQuick Controls 1.*. – Sassan Jun 17 '16 at 10:23
Thanks for info btw. – Sassan Jun 17 '16 at 10:25
Is `Qt.labs.platform` available in Qt 5.7? Doesn't seem that way. – Violet Giraffe Aug 03 '16 at 18:40
@VioletGiraffe nope, it will be available in 5.8. – Mitch Aug 03 '16 at 18:56

score 6 · Accepted Answer · edited Nov 17 '19 at 13:48

6

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

edited Nov 17 '19 at 13:48

Christopher Oezbek

23,994
6
61
85

answered Jun 17 '16 at 10:26

Sassan

2,187
2
24
43

From the blog post [Qt Quick Controls 2.0 – a new beginning!](http://blog.qt.io/blog/2016/06/10/qt-quick-controls-2-0-a-new-beginning/) : "There are no native styles in Qt Quick Controls 2 – all styles are cross-platform and look the same on all platforms." I don't think the Qt.labs.platform module is part of the Qt Quick Controls 2. If you want native controls, stick with Qt Quick Controls 1 (mixing it with some Qt Quick Controls 2 when needed). – GrecKo Jun 17 '16 at 13:39
Did you read J-P Nurmi's reply to my comment? The quote you mentioned talks about styles. I guess supporting native menubar or tray icons or things like that is slightly different than button's styles or things like that. Or maybe he changed his idea a little bit and added some exceptions for menubars, tray icons or dialogs. – Sassan Jun 17 '16 at 14:32
1

Yes I did, I was only talking about QQC2. I believe that the support for native platform menus won't be a part of QQC2 but of another module. – GrecKo Jun 17 '16 at 15:06
I see, yeah that makes sense. – Sassan Jun 17 '16 at 16:08
@GrecKo I think it will be a part of the same module, just a different import, in the same way as `Qt.labs.calendar` is a part of `qtquickcontrols2.git`. – Mitch Jun 18 '16 at 09:09

score 4 · Answer 3 · answered Jun 17 '16 at 08:28

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).

Thanks for info, but I'm using Qt so that I write once and use it everywhere. I asked the same question on Qt blog announcing Qt 5.7 release and this is their answer: http://blog.qt.io/blog/2016/06/16/qt-5-7-released/#comment-1197915 — Sassan, Jun 17 '16 at 10:25

score 2 · Answer 4 · answered Jan 21 '18 at 09:58

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.

score 1 · Answer 5 · answered Jul 10 '20 at 00:29

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.

Menubars in QtQuick Controls 2

5 Answers5

Update