NavigationDrawer QML Type | Fluid Reference Documentation

- Fluid Reference Documentation
- Fluid 1.0.0

# NavigationDrawer QML Type

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

Import Statement: | import Fluid.Controls 1.0
Inherited By: | NavigationListView

- List of all members, including inherited members

## Properties

- topContent : list<Item>

## 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 no contents, therefore it's completely customizable.

      import Fluid.Controls 2.0 as FluidControls

      FluidControls.ApplicationWindow {
          width: 400
          height: 400
          visible: true

          Button {
              text: "Open"
              onClicked: drawer.open()
          }

          FluidControls.NavigationDrawer {
              topContent: Image {
                  source: "background.png"

                  Layout.fillWidth: true
                  Layout.preferredHeight: 200
              }

              FluidControls.ListItem {
                  icon.source: FluidControls.Utils.iconUrl("content/inbox")
                  text: "Inbox"
              }

              FluidControls.ListItem {
                  icon.source: FluidControls.Utils.iconUrl("content/archive")
                  text: "Archive"
              }

              FluidControls.ListItem {
                  icon.source: FluidControls.Utils.iconUrl("action/settings")
                  text: "Settings"
                  showDivider: true
              }
          }
      }

For more information you can read the Material Design guidelines.

## Property Documentation

topContent : list<Item>

The items added to this list will be displayed on top of the contents.