Components/NavigationIntroduced in 1.3.0

ESidebar Sidebar

import EUI 1.0

Examples

Sidebar navigation

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ESidebar { height: 300 responsive: false title: qsTr("Workspace") model: [{ "index": "home", "text": qsTr("Home"), "iconSource": EIcons.HOUSE }, { "index": "files", "text": qsTr("Files"), "iconSource": EIcons.FOLDER }, { "index": "settings", "text": qsTr("Settings"), "iconSource": EIcons.GEAR }] }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Icon collapse

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ESidebar { height: 300 collapsed: true responsive: false title: qsTr("Workspace") model: [{ "index": "home", "text": qsTr("Home"), "iconSource": EIcons.HOUSE }, { "index": "files", "text": qsTr("Files"), "iconSource": EIcons.FOLDER }, { "index": "settings", "text": qsTr("Settings"), "iconSource": EIcons.GEAR }] }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Expand on hover

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ESidebar { height: 300 collapsed: true openOnHover: true responsive: false title: qsTr("Workspace") model: [{ "index": "home", "text": qsTr("Home"), "iconSource": EIcons.HOUSE }, { "index": "files", "text": qsTr("Files"), "iconSource": EIcons.FOLDER }, { "index": "settings", "text": qsTr("Settings"), "iconSource": EIcons.GEAR }] }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Floating variant

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ESidebar { height: 300 responsive: false title: qsTr("Workspace") variant: "floating" model: [{ "index": "home", "text": qsTr("Home"), "iconSource": EIcons.HOUSE }, { "index": "files", "text": qsTr("Files"), "iconSource": EIcons.FOLDER }, { "index": "settings", "text": qsTr("Settings"), "iconSource": EIcons.GEAR }] }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Offcanvas navigation

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Item { height: 60 width: 420 EButton { text: "Open navigation" onClicked: navigation.open = true } ESidebar { id: navigation open: false mode: "offcanvas" responsive: false title: qsTr("Workspace") model: [{index: "home", text: qsTr("Home"), iconSource: EIcons.HOUSE}, {index: "files", text: qsTr("Files"), iconSource: EIcons.FOLDER}, {index: "settings", text: qsTr("Settings"), iconSource: EIcons.GEAR}] } }

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

contentalias

Content slot; declare QML child objects directly inside the component.

DefaultextraContent.data

modelvar

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

Default[]

openbool

Whether the sidebar is open.

Defaulttrue

titlestring

Title text.

Default""

modestring

Collapse mode: icon or offcanvas.

open / save / folder

Default"icon"

overlaybool

Force overlay drawer mode.

Defaultfalse

sidestring

Sidebar side: left or right.

Default"left"

breakpointreal

Window width threshold for responsive drawer mode.

Default768

collapsedbool

Whether the panel is collapsed.

Defaultfalse

responsivebool

Use a drawer automatically below breakpoint.

Defaulttrue

collapsedWidthreal

Collapsed icon sidebar width.

Default64

currentIndexstring

Index of the current selected or displayed item.

-1: no selection
0 and above: item index

Default""

expandedWidthreal

Expanded sidebar width.

Default240

openOnHoverbool

Expand the sidebar on hover and collapse on exit.

Defaultfalse

closeOnSelectbool

Close overlay navigation after selecting an entry.

Defaulttrue

variantstring

Sidebar appearance: sidebar, floating or inset.

"text" / "circle"
"button" / "image"
"caption" / "h1"
"h3"

Default"sidebar"

footerComponentComponent

Component slot for custom footer; null uses the default content. See this page’s examples for delegate context.

Defaultnull

headerComponentComponent

Sidebar header replacing the default title and collapse button.

Defaultnull

iconModeboolRead only

Whether collapsed icon-only mode is active.

Default!overlayMode && collapsed && mode === "icon"

overlayModeboolRead only

Whether navigation currently uses an overlay drawer.

Default

Show default value

overlay || mode === "offcanvas" || responsive && Window.window !== null && Window.window.width < breakpoint

Signals

SignaturePurpose

selected(string index, var item)

Emitted when a sidebar item is selected; index identifies it and item is its data.

Methods

SignaturePurpose

toggle()

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