Detailed Description

A persistent Material Design 3 Expressive navigation rail.

NavigationRail provides access to primary application destinations on medium, expanded, large, and extra-large windows. Applications choose when to show it with Breakpoints; the control does not hide or expand itself in response to window-size changes.

The rail is collapsed by default. Collapsed destinations place their icons above their labels in a 96 dp rail. Expanded destinations use a logical leading icon in a content-sized rail constrained between 220 and 360 dp. A header remains at the top while destinations can be arranged at the top, center, or bottom. System safe-area margins are applied on the vertical and logical-start edges.

NavigationRail inherits its destination collection API from QtQuick.Templates.Container. Declare NavigationRailItem objects as its default content, use count and itemAt() to inspect them, and use currentIndex to control their exclusive checked state. The initial current index is zero; assigning minus one clears selection.

MD.NavigationRail {
    anchors.top: parent.top
    anchors.bottom: parent.bottom
    expanded: MD.Breakpoints.fromWidth(window.width) >= MD.Breakpoints.Expanded
 
    header: Component {
        MD.IconButton {
            text: qsTr("Toggle navigation rail")
            icon.name: MD.SymbolNames.symbolMenu
        }
    }
 
    MD.NavigationRailItem {
        text: qsTr("Home")
        icon.name: MD.SymbolNames.symbolHome
    }
    MD.NavigationRailItem {
        text: qsTr("Settings")
        icon.name: MD.SymbolNames.symbolSettings
    }
}

Collapsed rails should normally contain three to seven destinations and are intended for windows at least 600 dp wide.

For more information see the Material Design 3 navigation rail guidelines.

Definition at line 59 of file NavigationRail.qml.

The documentation for this class was generated from the following file:

src/controls/qml/navigation/NavigationRail.qml