I have a QML Menu ponent that I would like to place at the top of each and everyone of my views and sort of sync up so it goes the look and feel of the typical webpage menu. How do I go about doing this please

import QtQuick 1.0 

Row {
    width: 500
    height: 50
    anchors.centerIn: parent
    spacing: parent.width/6

    Button {
         id: loadButton
         text: qsTr("Menu")
    }
    Button { 
         id: saveButton
         text: qsTr("Profile")
    }
    Button {
         id: exitButton
         text: qsTr("View Products")
    }

}

I have a QML Menu ponent that I would like to place at the top of each and everyone of my views and sort of sync up so it goes the look and feel of the typical webpage menu. How do I go about doing this please

import QtQuick 1.0 

Row {
    width: 500
    height: 50
    anchors.centerIn: parent
    spacing: parent.width/6

    Button {
         id: loadButton
         text: qsTr("Menu")
    }
    Button { 
         id: saveButton
         text: qsTr("Profile")
    }
    Button {
         id: exitButton
         text: qsTr("View Products")
    }

}

• javascript
• qt
• qml

3 Answers 3

Read about "z" property QDeclarativeItem or QML Item. The answer is to give your menu ponent instance the highest z value.

MyMenu
{
   z: 100

   ...
}

Rectangle
{
   z: 1

   ...
}

The qml renderer decides upon this values which items to draw first; and in case of something overlaying your menu it will end below it. By the way, the default z value is 0, so all are same and it is more or less undefined in which order it is rendered.

Good Luck!

With QML everything needs to end up in a container in order to align everything with it. In this case, if you're trying to build a bunch of Buttons into a menu/row then you need that to always be at the top of every page-like container you put it in.

IE, put your above stuff all in a file called "Menu.qml". Then inside your program every place you want the menu to appear, make an enclosing Rectangle (or whatever) and anchor the menu to the top:

Rectangle {
    Menu { id: menu; anchor.top: parent.top; anchor.left: parent.left; }

    // put other stuff here
    Rectangle { anchor.top: menu.bottom; }
 }

If you do that for every object that will appear then you're good to go!

As another example, in a PageStack, make each page include that at the top.

One option is to use ApplicationWindow that is designed for desktop applications with a header on top, a footer on bottom (for status etc), and a middle content area.

ApplicationWindow {
visible:true

header: ToolBar {
    RowLayout {
        anchors.fill: parent
        ToolButton {
            text: qsTr("‹")
            onClicked: stack.pop()
        }
        Label {
            text: "Title"
            elide: Label.ElideRight
            horizontalAlignment: Qt.AlignHCenter
            verticalAlignment: Qt.AlignVCenter
            Layout.fillWidth: true
        }
        ToolButton {
            text: qsTr("⋮")
            onClicked: menu.open()
        }
    }
}

StackView {
    id: stack
    anchors.fill: parent
}
}

From: https://doc.qt.io/qt-6/qml-qtquick-controls2-applicationwindow.html

The StackView takes the big middle area where one and only one of your many content pages shows up.