Detailed Description

A Material 3 Expressive top app bar.

AppBar provides small, medium flexible, and large flexible variants. Flexible variants expand to show larger wrapping title content and collapse into the small layout as their scrollTarget scrolls. The inherited navigationAction and actions properties accept AppBarAction objects, with lower-priority actions moving into an adaptive overflow menu.

Place an AppBar in a page or application window header:

MD.AppBar {
    variant: MD.AppBar.MediumFlexible
    title: qsTr("Library")
    subtitle: qsTr("Recently added")
    scrollTarget: pageFlickable
 
    navigationAction: MD.AppBarAction {
        text: qsTr("Back")
        icon.name: "arrow_back"
    }
 
    actions: [
        MD.AppBarAction {
            text: qsTr("Favorite")
            icon.name: "favorite"
        }
    ]
}

Safe-area insets and right-to-left layout mirroring are applied automatically. The background and expandedBackground remain edge-to-edge.

For more information see the Material Design 3 app bar guidelines.

Definition at line 44 of file AppBar.qml.

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

src/controls/qml/components/AppBar.qml