Liri Fluid API

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.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.

This navigation drawer comes with no contents, therefore it's completely customizable.

By default the navigation drawer is permanent and pinned on desktop and temporary on mobile.

  import Fluid.Controls 2.0 as FluidControls

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

      Button {
          text: "Open"

      FluidControls.NavigationDrawer {
          topContent: Image {
              source: "background.png"
              width: parent.width
              height: 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.