Components/Navigation

EMenu Menu

import EUI 1.0

Examples

Nested menus and overflow

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Item { width: Math.min(640, parent.width) height: 480 Column { width: parent.width - 48 spacing: 16 anchors.centerIn: parent EMenu { width: parent.width direction: EOrientation.Horizontal objectName: "webNavigationMenu" model: [{index: "workspace", text: qsTr("Workspace"), children: [ {index: "open", text: qsTr("Open project")}, {index: "recent", text: qsTr("Recent"), children: [{index: "gallery", text: "EUI Gallery"}]}]}, {index: "settings", text: qsTr("Settings")}, {index: "restricted", text: qsTr("Restricted"), disabled: true}] } } }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Menu

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Column { spacing: 16 width: parent.width EMenu { width: 260 uniqueOpened: true currentIndex: "home" model: [{ "index": "home", "text": "Home", "iconSource": EIcons.HOUSE }, { "index": "workspace", "text": "Workspace", "children": [{ "index": "projects", "text": "Projects" }, { "index": "reports", "text": "Reports" }] }] onItemSelected: function(index, indexPath, item) { console.log(index, indexPath, item.text) } } EMenu { width: parent.width currentIndex: "products" styleType: EStyle.Success direction: EOrientation.Horizontal model: [{ "index": "products", "text": qsTr("Products"), "iconSource": EIcons.STAR }, { "index": "solutions", "text": qsTr("Solutions"), "iconSource": EIcons.COMPASS }, { "index": "support", "text": qsTr("Support"), "iconSource": EIcons.BELL }] } EMenu { width: 64 indent: 18 iconSize: 20 duration: 260 collapse: true itemHeight: 48 uniqueOpened: false currentIndex: "favorites" styleType: EStyle.Warning textColor: EPaletteManager.BasePalette.gainsboro backgroundColor: EPaletteManager.BasePalette.black hoverColor: EPaletteManager.BasePalette.charcoalGray activeTextColor: EPaletteManager.ThemePalette.fetchColorForStyle(EStyle.Warning) model: [{ "index": "favorites", "text": qsTr("Favorites"), "iconSource": EIcons.STAR }, { "index": "notifications", "text": qsTr("Notifications"), "iconSource": EIcons.BELL }] } }

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

activeTextColorcolor

Text color of the selected item.

DefaultDynamic binding

backgroundColorcolor

Background color.

DefaultDynamic binding

closeOnClickOutsidebool

Close when clicking outside the popup.

Defaulttrue

collapsebool

Use a collapsed menu.

Defaultfalse

collapseCloseIconint

Icon used by the component.

EIcons.*
0 (no icon)

DefaultEIcons.CHEVRON_RIGHT

collapseOpenIconint

Icon used by the component.

EIcons.*
0 (no icon)

DefaultEIcons.CHEVRON_RIGHT

collapseTransitionbool

Animate menu collapse transitions.

Defaultfalse

currentIndexstring

Identifier of the selected menu item.

Menu item identifier
"": no selection

Default""

directionint

Component layout direction.

EOrientation.Horizontal
EOrientation.Vertical

DefaultEOrientation.Vertical

durationint

Animation or display duration in milliseconds; the component binding identifies its use.

Default180

ellipsisbool

Collapse overflowing horizontal entries into a more menu.

Defaulttrue

ellipsisIconint

Icon used by the component.

EIcons.*
0 (no icon)

DefaultEIcons.ELLIPSIS

enabledbool

Allow interaction; false disables the control.

Defaulttrue

expandCloseIconint

Icon used by the component.

EIcons.*
0 (no icon)

DefaultEIcons.CHEVRON_DOWN

expandOpenIconint

Icon used by the component.

EIcons.*
0 (no icon)

DefaultEIcons.CHEVRON_UP

heightreal

Component size in pixels; may be bound to its parent layout.

DefaultimplicitHeight

hideTimeoutint

Delay, throttling or automatic close time in milliseconds; 0 means no delay or no timed close.

Default150

hoverColorcolor

Hover background color.

DefaultDynamic binding

iconSizeint

Size of the icon, option or interactive part in pixels.

Default16

indentint

Indentation per tree or menu level in pixels.

Default20

itemHeightint

Menu item, data row or header row height in pixels.

Default44

menuTriggerstring

Interaction that opens a submenu.

"hover" / "click"

Default"hover"

modelvar

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

Default[]

openedIndexesvar

Unique keys of expanded nodes, table rows or menu entries.

Default[]

persistentbool

Keep popup content instantiated after closing.

Defaulttrue

popperEffectstring

Visual theme of the popup.

"light" / "dark"

Default"light"

popperOffsetreal

Gap between popup menu and reference item in pixels.

Default0

showTimeoutint

Delay, throttling or automatic close time in milliseconds; 0 means no delay or no timed close.

Default150

styleTypeint

Semantic color style.

EStyle.Default
EStyle.Primary
EStyle.Success
EStyle.Info
EStyle.Warning
EStyle.Danger

DefaultEStyle.Primary

textColorcolor

Text color.

DefaultDynamic binding

uniqueOpenedbool

Keep at most one submenu open at each level.

Defaulttrue

visiblebool

Whether the component is visible.

Defaulttrue

widthreal

Component size in pixels; may be bound to its parent layout.

DefaultimplicitWidth

allEntriesvarRead only

All menu entries after flattening hierarchy.

DefaultComputed at runtime

displayItemsvarRead only

Entries directly displayed in the horizontal menu.

DefaultComputed at runtime

horizontalboolRead only

Whether the resolved layout is horizontal or vertical.

DefaultComputed at runtime

naturalWidthrealRead only

Natural menu width before overflow collapse.

DefaultComputed at runtime

overflowItemsvarRead only

Horizontal menu entries moved into the overflow menu.

DefaultComputed at runtime

popupModeboolRead only

Whether the menu uses popup submenus.

DefaultComputed at runtime

resolvedActiveTextColorcolorRead only

Resolved color from the theme, current state and custom palette.

DefaultComputed at runtime

resolvedBackgroundColorcolorRead only

Resolved color from the theme, current state and custom palette.

DefaultComputed at runtime

resolvedHoverColorcolorRead only

Resolved color from the theme, current state and custom palette.

DefaultComputed at runtime

resolvedTextColorcolorRead only

Resolved color from the theme, current state and custom palette.

DefaultComputed at runtime

visibleItemsvarRead only

Currently visible menu entries.

DefaultComputed at runtime

visibleRootCountintRead only

Number of root entries directly visible in the horizontal menu.

DefaultComputed at runtime

Signals

SignaturePurpose

closed(string index)

Emitted when a submenu closes; index identifies the submenu.

opened(string index)

Emitted when a submenu opens; index identifies the submenu.

branchClosed(string index, var indexPath)

Emitted when a submenu branch closes; index identifies it and indexPath is its full menu path.

branchOpened(string index, var indexPath)

Emitted when a submenu branch opens; index identifies it and indexPath is its full menu path.

itemSelected(string index, var indexPath, var item)

Emitted when a menu item is selected; index identifies it, indexPath is its full path, and item is its data.

Methods

SignaturePurpose

toggle(index)

Toggle the expanded or selected state; pass the target identifier when required.

isOpened(index)

Return whether the submenu identified by index is open.

trigger(index, item)

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

updateActiveIndex(index)

Set the active menu item identifier.

select(index)

Activate the menu item identified by index.

close(index)

Close the submenu identified by index.

open(index)

Open the submenu identified by index.