Skip to content

Inserting text in the MenuBar of QML

These menus by default appear on the left side. I want to place some text on the left side before the menu starts appearing.

How to push the menus to right in order to create space for the text in the menubar?

I want the following:
enter image description here

That text “AmplifyRemote” is appearing before the menu starts. How to achieve that here?

ApplicationWindow
{
    id: window; visible: true; width: Screen.width; height: Screen.height; flags: Qt.FramelessWindowHint
    menuBar:
      MenuBar
      {
        id: menuBar
        Menu { title: qsTr("File") }
        Menu { title: qsTr("Edit") }
        Menu { title: qsTr("View") }
        Menu { title: qsTr("Help") }
        delegate: MenuBarItem {
            id: menuBarItem
            font
            {
                pointSize: decoration.font_size_8
                family: decoration.font_family
            }
            contentItem: Text {
                text: menuBarItem.text
                font: menuBarItem.font
                opacity: enabled ? 1.0 : 0.3
                color: menuBarItem.highlighted ? "white":"#3F3F3F"
                horizontalAlignment: Text.AlignLeft
                verticalAlignment: Text.AlignVCenter
                elide: Text.ElideRight
            }
            background: Rectangle {
                implicitWidth: 40
                implicitHeight: 40
                opacity: enabled ? 1 : 0.3
                color: menuBarItem.highlighted ? "#292a38" : "transparent"
            }
        }
        background: Rectangle {
            implicitWidth: 40
            implicitHeight: 11
            color: "#d2d2d2"
            // This is the text I want before menus start
            Text{ text:"jjjjjjjjj"; anchors.left: parent.left}
            Rectangle {
                color: "#21be2b"
                width: parent.width
                height: 1
                anchors.bottom: parent.bottom
            }
        }
    }
}

Answer

It’s possible there are prettier solutions, but it can work by adding a special Menu item to the front of your list that is disabled.

MenuBar {
    id: menuBar
    Menu { title: "jjjjjjjj" }
    Menu { title: qsTr("File") }
    Menu { title: qsTr("Edit") }
    Menu { title: qsTr("View") }
    Menu { title: qsTr("Help") }
    delegate: MenuBarItem {
        id: menuBarItem
        enabled: text !== "jjjjjjjj"
    }
}