• FluentUI Reference Documentation
• FluentUI.Controls
• NavigationView
• FluentUI 1.0

NavigationView QML Type

A complete navigation container with a sidebar. More...

• List of all members, including inherited members

Properties

• appBarHeight : int
• autoSuggestBox : Item
• autoSuggestBoxReplacement : Component
• displayMode : int
• footerItems : list
• goBackButton : AbstractButton
• items : list
• leading : Component
• leadingItem : Item
• logo : var
• logoDelegate : Component
• router : PageRouter
• routerView : PageRouterView
• sideBarFooterView : ListView
• sideBarShadow : bool
• sideBarView : ListView
• sideBarWidth : int
• sideItemDelegate : Component
• sideItemHeight : int
• sidebar : bool
• title : string
• titleBarTopMargin : int
• topBarHeight : int
• trailing : Component
• trailingItem : Item

Signals

• void rightTap(var item)
• void sourceItemsChanged(var sourceItems)
• void tap(var item)

Methods

• void go(url url, var argument)

Detailed Description

NavigationView provides a comprehensive navigation framework with a collapsible sidebar, top app bar, and support for routing. It supports multiple display modes that automatically adapt at configurable breakpoints, and provides extensive customization options for items, headers, footers, and visual styling.

Usage Example

 import QtQuick
 import FluentUI.Controls

 NavigationView {
     title: "My App"
     items: [
         PaneItem { title: "Home"; icon: "home"; key: "home" },
         PaneItemExpander {
             title: "Settings"
             icon: "settings"
             children: [
                 PaneItem { title: "General"; key: "general" },
                 PaneItem { title: "Account"; key: "account" }
             ]
         }
     ]
     footerItems: [
         PaneItem { title: "About"; icon: "info"; key: "about" }
     ]
 }

Property Documentation

appBarHeight : int

The height of the top app bar area. Defaults to 48 pixels.

autoSuggestBox : Item

The auto-suggest search box item displayed in the app bar.

autoSuggestBoxReplacement : Component

A custom Component that replaces the default auto-suggest box.

displayMode : int

The display mode of the navigation. Defaults to NavigationViewType.Auto. Other modes include NavigationViewType.Minimal, NavigationViewType.Compact, and NavigationViewType.Open. In Auto mode, the display adapts based on the available width.

footerItems : list

The list of footer navigation items displayed at the bottom of the sidebar.

goBackButton : AbstractButton

The button used for navigating back in the page stack.

items : list

The list of primary navigation items. Typically contains PaneItem, PaneItemExpander, PaneItemHeader, and PaneItemSeparator objects.

leading : Component

A custom Component displayed at the leading edge of the app bar.

leadingItem : Item

The instantiated item from the leading Component. Read-only.

logo : var

An optional logo image source displayed alongside the title.

logoDelegate : Component

A custom Component for rendering the logo.

router : PageRouter

The PageRouter used for navigation within this NavigationView.

routerView : PageRouterView

The PageRouterView that displays the routed pages.

sideBarFooterView : ListView

The ListView used for the footer sidebar items. Read-only.

sideBarShadow : bool

Whether a shadow is displayed behind the sidebar. Defaults to true.

sideBarView : ListView

The ListView used for the primary sidebar items. Read-only.

sideBarWidth : int

The width of the sidebar when fully open. Defaults to 320 pixels.

sideItemDelegate : Component

A custom Component for rendering sidebar items.

sideItemHeight : int

The height of each item in the sidebar. Defaults to 40 pixels.

sidebar : bool

Whether the sidebar is currently visible.

title : string

The title text displayed in the app bar area.

titleBarTopMargin : int

The top margin for the title bar area. Defaults to 0. Can be set to accommodate system title bar areas on certain platforms.

topBarHeight : int

The height of the top navigation bar. Defaults to 50 pixels.

trailing : Component

A custom Component displayed at the trailing edge of the app bar.

trailingItem : Item

The instantiated item from the trailing Component. Read-only.

Signal Documentation

void rightTap(var item)

Emitted when a navigation item is right-tapped. The item parameter contains the model data of the tapped item.

void sourceItemsChanged(var sourceItems)

Emitted when the source items collection changes.

void tap(var item)

Emitted when a navigation item is tapped. The item parameter contains the model data of the tapped item.

Method Documentation

void go(url url, var argument)

Navigates to the specified url with an optional argument using the associated PageRouter.