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.