Base type for items inside Navigation More...

Import Statement: import VPlayApps 1.0




Detailed Description

NavigationItems are the base type for direct children of Navigation. They represent one entry in the used navigation type, a Tab inside a TabControl or a list entry in an AppDrawer, or both. The default behavior of Navigation is platform dependent, using AppDrawer on Android and TabControl on iOS.

A NavigationItem is directly derived from the Qt component Tab. It is defined by a title text, a icon and its content.

The content of a NavigationItem is a Component, and can be any QML Item put directly as child item inside NavigationItem.

Example Usage

NavigationItem should be used inside Navigation. Use the following code for a simple platform dependent navigation, where FirstPage and SecondPage are the content pages of your app.

 App {
   Navigation {
     NavigationItem {
       title: "First Page"
       icon: IconType.calculator

       //page without navigation stack - no sub pages
       FirstPage { }

     NavigationItem {
       title: "Second Page"
       icon: IconType.list

       //page with sub page navigation
       NavigationStack {
         SecondPage { }

Property Documentation

icon : string

Icon to be used inside the representation for this NavigationItem. One of the IconType constants.

To see a categorized view of all available icons with interactive search, see here. You may also use the iconFont property to set a custom icon font.

Note: The icon property is only used by the default NavigationItem::iconComponent. If a custom component is specified, setting the icon has no effect.

See also iconFont and iconComponent.

iconComponent : Component

Specifies the component for displaying the tab icon. If no custom component is set, the NavigationItem creates an Icon to show the NavigationItem::icon of the NavigationItem::iconFont.

To set a custom icon, implement your own component for the NavigationItem. When instantiated, the component is parented to a container item that comes with three important properties:

  • The tabControl property is true when the icon is used for tabs, false when it is used inside the app drawer menu.
  • The navItem property holds a reference to the NavigationItem that uses the icon. It may be used to access other properties like the title.
  • The selected property states whether the NavigationItem that uses the icon is currently active.

The following example shows colored Rectangles for the icons of an app navigation.

 import QtQuick 2.4
 import VPlayApps 1.0

 App {
   // set up the custom icon component
   Component {
     id: iconComponent
     Rectangle {
       // we fill the parent (container item for the icon)
       anchors.fill: parent

       // if not selected, we use the defined Theme colors of the tab bar or app drawer
       property color offColor: parent.tabControl ? Theme.tabBar.titleOffColor : Theme.navigationAppDrawer.textColor

       // color the icon based on the title when it is selected
       color: parent.selected ? parent.navItem.title :  offColor

   Navigation {
     NavigationItem {
       title: "Red"
       iconComponent: iconComponent
       NavigationStack {
         RedPage {  }

     NavigationItem {
       title: "Green"
       iconComponent: iconComponent
       NavigationStack {
         GreenPage { }

This QML property was introduced in V-Play 2.8.2.

See also icon and iconFont.

iconFont : string

Specifies the icon font used to display the tab icon. If no font is set, the default icon font is used.

Note: This property is only used by the default NavigationItem::iconComponent. If a custom component is specified, setting the icon font has no effect.

This QML property was introduced in V-Play 2.8.2.

See also icon and iconComponent.

[read-only] listView : AppListView

Accessor an AppListView inside the content of this NavigationItem, if any.

Accessor property for the NavigationStack used for navigating to sub pages, if any.

[read-only] page : Page

Accessor property for the Page of the NavigationItem or the current main page if a NavigationStack is used.

Note: The content pages of navigation items are dynamically created and loaded at runtime. As long as the page has not been created, the page property remains null. During this time page properties like Page::title cannot be accessed, even if the page is correctly set up in your Navigation structure.

Signal Documentation


Called when this NavigationItem is selected by the user, either from within TabControl or AppDrawer.

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
create apps
create games
cross platform
native performance
3rd party services
game network
level editor
easiest to learn
biggest time saving
best support