NavigationListView QML Type | Fluid Reference Documentation

- Fluid Reference Documentation
- Fluid 1.2.0

# 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

- List of all members, including inherited members

## Properties

- actions : list<Action>
- autoHighlight : bool
- currentIndex : int
- currentItem : Item
- delegate : Component

## 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"
              onClicked: drawer.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.