Skip to content
Slint Material Components

AppBar

import { AppBar } from "material.slint";
export component Example inherits Window {
    width: 400px;
    height: 200px;
    background: transparent;
    AppBar {
        title: "My App";
        width: parent.width;
        height: parent.height;
    }
}
slint

An AppBar is a top-level navigation component that displays the app title and optional action buttons. It provides a consistent way to present the app’s primary navigation and actions.

Properties

Section titled “Properties”

container-background

Section titled “container-background”

bool default: false

Whether to use the container background color instead of the surface color.

leading-icon

Section titled “leading-icon”

struct IconButtonItem default: a struct with all default values

IconButtonItem

This structure represents a IconButtonItem with x and y coordinate

  • icon (image): The icon to display in the button.
  • tooltip (string): The tooltip to display when hovering over the button.
  • enabled (bool): Whether the button is enabled.

An icon button item displayed at the start of the app bar, typically used for navigation.

title

Section titled “title”

string default: ""

The title text displayed in the app bar.

trailing-icon

Section titled “trailing-icon”

struct IconButtonItem default: a struct with all default values

IconButtonItem

This structure represents a IconButtonItem with x and y coordinate

  • icon (image): The icon to display in the button.
  • tooltip (string): The tooltip to display when hovering over the button.
  • enabled (bool): Whether the button is enabled.

An icon button item displayed at the end of the app bar, typically used for actions.

Callbacks

Section titled “Callbacks”

leading-clicked()

Section titled “leading-clicked()”

Invoked when the leading icon is clicked.

trailing-clicked()

Section titled “trailing-clicked()”

Invoked when the trailing icon is clicked.

© 2025 SixtyFPS GmbH