Components/NavigationIntroduced in 1.3.0

EMegaMenu Mega menu

import EUI 1.0

Examples

Multi-column menu

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EMegaMenu { width: 520 model: [{ "label": qsTr("Workspace"), "children": [{ "label": qsTr("Design"), "children": [{ "label": "Assets", "command": "assets" }, { "label": "Themes", "command": "themes" }] }, { "label": qsTr("Develop"), "children": [{ "label": "Code", "command": "code" }, { "label": "Build", "command": "build" }] }] }, { "label": qsTr("Help"), "children": [{ "label": "Learn", "children": [{ "label": "Docs", "command": "docs" }] }] }] }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Vertical menu

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EMegaMenu { width: 180 vertical: true model: [{ "label": qsTr("Workspace"), "children": [{ "label": qsTr("Design"), "children": [{ "label": "Assets", "command": "assets" }, { "label": "Themes", "command": "themes" }] }, { "label": qsTr("Develop"), "children": [{ "label": "Code", "command": "code" }, { "label": "Build", "command": "build" }] }] }, { "label": qsTr("Help"), "children": [{ "label": "Learn", "children": [{ "label": "Docs", "command": "docs" }] }] }] }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Wide columns

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EMegaMenu { width: 520 columnWidth: 240 model: [{ "label": qsTr("Workspace"), "children": [{ "label": qsTr("Design"), "children": [{ "label": "Assets", "command": "assets" }, { "label": "Themes", "command": "themes" }] }, { "label": qsTr("Develop"), "children": [{ "label": "Code", "command": "code" }, { "label": "Build", "command": "build" }] }] }, { "label": qsTr("Help"), "children": [{ "label": "Learn", "children": [{ "label": "Docs", "command": "docs" }] }] }] }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Command feedback

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EMegaMenu { width: 520 model: [{ "label": qsTr("Workspace"), "children": [{ "label": qsTr("Design"), "children": [{ "label": "Assets", "command": "assets" }, { "label": "Themes", "command": "themes" }] }, { "label": qsTr("Develop"), "children": [{ "label": "Code", "command": "code" }, { "label": "Build", "command": "build" }] }] }, { "label": qsTr("Help"), "children": [{ "label": "Learn", "children": [{ "label": "Docs", "command": "docs" }] }] }] onCommand: function(command, item) { sampleFeedback.open(String(command)) } EMessage { id: sampleFeedback type: EStyle.Success objectName: "sampleFeedback" } }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Disabled menu

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EMegaMenu { width: 520 enabled: false model: [{ "label": qsTr("Workspace"), "children": [{ "label": qsTr("Design"), "children": [{ "label": "Assets", "command": "assets" }, { "label": "Themes", "command": "themes" }] }, { "label": qsTr("Develop"), "children": [{ "label": "Code", "command": "code" }, { "label": "Build", "command": "build" }] }] }, { "label": qsTr("Help"), "children": [{ "label": "Learn", "children": [{ "label": "Docs", "command": "docs" }] }] }] }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Properties

PropertyDescriptionValues and default

modelvar

Component data source; item structure follows the current example and component contract.

Default[]

activeIndexint

Open mega-menu index; -1 closes the menu.

-1: no selection
0 and above: item index

Default-1

columnWidthint

Width of each group column in the expanded menu.

Default180

verticalbool

Whether the top level navigation runs vertically.

Defaultfalse

groupsvarRead only

Groups under the active mega-menu entry.

Default

Show default value

activeIndex >= 0 && Array.isArray(model) && model[activeIndex] && Array.isArray(model[activeIndex].children) ? model[activeIndex].children : []

Signals

SignaturePurpose

command(var command, var item)

Emitted when a command is invoked, with its value and menu item.

Methods

SignaturePurpose

close()

Close the component panel or popup.

trigger(item)

Invoke the specified item command, as if the item were selected.

open(index)

Open the component panel or popup.