Liri Fluid API

NavigationListView QML Type

The navigation drawer slides in from the left and is a common pattern in apps. More...

Import Statement: import Fluid.Controls 1.1


Detailed Description

This is a temporary navigation drawer: it can toggle open or closed. Closed by default, this type of navigation drawer opens temporarily above all other content until a section is selected or the overlay is tapped.

NavigationDrawer is recommended on phones and tablets.

This navigation drawer comes with a built-in ListView.

  import QtQuick 2.10
  import QtQuick.Controls 2.3
  import QtQuick.Window 2.2
  import Fluid.Controls 1.0 as FluidControls

  Window {
      id: window
      width: 400
      height: 400
      visible: true

      Button {
          text: "Open"

      FluidControls.NavigationListView {
          topContent: Image {
              width: parent.width
              height: 200
              source: "background.png"

          actions: [
              FluidControls.Action {
                  text: "Action 1"
              FluidControls.Action {
                  text: "Action 2"

For more information you can read the Material Design guidelines.

Property Documentation

actions : list<Action>

List of actions to be displayed by the drawer.

autoHighlight : bool

This property holds whether auto-highlight is enabled.

If this property is true, the current item will be automatically highlighted.

The default value is false.

currentIndex : int

The currentIndex property holds the index of the current item.

currentItem : Item

The currentItem property holds the current item.

delegate : Component

The delegate for item that constitute a menu item.