How to make this menu ?

[A Former User]

Hello, I want to create a submenu like in the photos. How can I show the active menu as in the photo?

[dheerendra]

There is nothing exist like this. You may need to work with many custom images to make this happen.

[A Former User]

The components in the pictures are available, but I have no idea how to use them.

[lemons]

@NullByte definitely not the best implementation, but maybe it brings you on the right track:

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
import QtGraphicalEffects 1.15

Window {
    width: 320
    height: 520
    visible: true
    title: qsTr("Navbar Quick Sketch")
    ColumnLayout {
        anchors.fill: parent
        StackLayout {
            Layout.fillWidth: true
            Layout.fillHeight: true
            currentIndex: navBar.currentIndex
            Item {
                Text {
                    anchors.centerIn: parent
                    text: "A"
                }
            }
            Item {
                Text {
                    anchors.centerIn: parent
                    text: "B"
                }
            }
            Item {
                Text {
                    anchors.centerIn: parent
                    text: "C"
                }
            }
        }
        // BEGIN NAVBAR
        Item {
            id: navBar
            Layout.fillWidth: true
            height: 80

            property int currentIndex: 0

            property var navigationModel: [{
                    "iconName": "A"
                }, {
                    "iconName": "B"
                }, {
                    "iconName": "C"
                }]

            property int animationInterval: 150

            Item {
                id: navBarBackground
                anchors.fill: parent
                // overflow outside the viewport to make outer radius invisible
                anchors.leftMargin: -styleRadius
                anchors.rightMargin: -styleRadius

                property color backgroundColor: "#EEF3FF"
                property int styleRadius: 20

                // bottom background
                Rectangle {
                    id: bottom
                    anchors.fill: parent
                    anchors.topMargin: parent.height / 2
                    color: parent.backgroundColor
                }
                // background left to indicator
                Rectangle {
                    id: left
                    anchors.left: parent.left
                    anchors.top: parent.top
                    anchors.topMargin: parent.height * 0.15
                    anchors.right: indicator.left
                    anchors.bottom: parent.bottom
                    color: parent.backgroundColor
                    radius: parent.styleRadius
                }
                // the indicator part - 2 circles inside each other
                Rectangle {
                    id: indicator
                    height: parent.height * 0.8
                    width: height
                    anchors.top: parent.top
                    color: "white"
                    radius: width / 2
                    property int itemWidth: navBar.width / navBar.navigationModel.length
                    property int offset: (itemWidth - width) / 2
                    x: parent.styleRadius + offset + itemWidth * navBar.currentIndex

                    Rectangle {
                        id: highlightCircle
                        anchors.fill: parent
                        anchors.margins: 5
                        radius: height / 2
                        color: "#585CE5"
                    }
                    // add a simple shadow to the highlight
                    DropShadow {
                        anchors.fill: highlightCircle
                        horizontalOffset: 4
                        verticalOffset: 4
                        radius: 4
                        samples: 9
                        color: "#40000000"
                        source: highlightCircle
                        antialiasing: true
                    }
                    // very simple animation
                    Behavior on x {
                        PropertyAnimation {
                            duration: navBar.animationInterval
                            easing.type: Easing.InOutBounce
                        }
                    }
                }

                // background right to the indicator
                Rectangle {
                    id: right
                    anchors.right: parent.right
                    anchors.top: parent.top
                    anchors.topMargin: parent.height * 0.15
                    anchors.left: indicator.right
                    anchors.bottom: parent.bottom
                    color: parent.backgroundColor
                    radius: parent.styleRadius
                }
            }
            RowLayout {
                anchors.fill: parent
                anchors.topMargin: parent.height * 0.15
                Repeater {
                    model: navBar.navigationModel
                    delegate: Item {
                        id: delegateWrapper
                        Layout.fillWidth: true
                        Layout.fillHeight: true

                        Text {
                            property bool isActive: index === navBar.currentIndex
                            parent: isActive ? indicator : delegateWrapper
                            anchors.centerIn: parent
                            horizontalAlignment: Text.AlignHCenter
                            font.pointSize: 16
                            text: modelData.iconName
                            color: isActive ? "white" : "#9297B2"
                        }

                        MouseArea {
                            anchors.fill: parent
                            onClicked: {
                                navBar.currentIndex = index
                            }
                        }
                    }
                }
            }
        }
    }
}

[GrecKo]

I shared an experiment around this in a previous forum post :
https://forum.qt.io/topic/111454/qml-more-advanced-shapes/4

[A Former User]

@lemons working like charm !

@GrecKo thanks i will review