AdwHeaderBar

A title bar widget.

<picture> <source srcset="header-bar-dark.png" media="(prefers-color-scheme: dark)"> <img src="header-bar.png" alt="header-bar"> </picture>

adw.header_bar.HeaderBar is similar to gtk.header_bar.HeaderBar, but provides additional features compared to it. Refer to gtk.header_bar.HeaderBar for details. It is typically used as a top bar within class@ToolbarView.

Dialog Integration

When placed inside an class@Dialog, adw.header_bar.HeaderBar will display the dialog title intead of window title. It will also adjust the decoration layout to ensure it always has a close button and nothing else. Set property@HeaderBar:show-start-title-buttons and property@HeaderBar:show-end-title-buttons to FALSE to remove it if it's unwanted.

When placed inside an class@NavigationPage, adw.header_bar.HeaderBar will display the page title instead of window title.

When used together with class@NavigationView or class@NavigationSplitView, it will also display a back button that can be used to go back to the previous page. The button also has a context menu, allowing to pop multiple pages at once, potentially across multiple navigation views.

Set property@HeaderBar:show-back-button to FALSE to disable this behavior in rare scenarios where it's unwanted.

Split View Integration

When placed inside class@NavigationSplitView or class@OverlaySplitView, adw.header_bar.HeaderBar will automatically hide the title buttons other than at the edges of the window.

Centering Policy

property@HeaderBar:centering-policy allows to enforce strict centering of the title widget. This can be useful for entries inside class@Clamp.

Title Buttons

Unlike gtk.header_bar.HeaderBar, adw.header_bar.HeaderBar allows to toggle title button visibility for each side individually, using the property@HeaderBar:show-start-title-buttons and property@HeaderBar:show-end-title-buttons properties.

CSS nodes

headerbar
╰── windowhandle
    ╰── box
        ├── widget
        │   ╰── box.start
        │       ├── windowcontrols.start
        │       ├── widget
        │       │   ╰── [button.back]
        │       ╰── [other children]
        ├── widget
        │   ╰── [Title Widget]
        ╰── widget
            ╰── box.end
                ├── [other children]
                ╰── windowcontrols.end

adw.header_bar.HeaderBar's CSS node is called headerbar. It contains a windowhandle subnode, which contains a box subnode, which contains three widget subnodes at the start, center and end of the header bar. The start and end subnotes contain a box subnode with the .start and .end style classes respectively, and the center node contains a node that represents the title.

Each of the boxes contains a windowcontrols subnode, see gtk.window_controls.WindowControls for details, as well as other children.

When property@HeaderBar:show-back-button is TRUE, the start box also contains a node with the name widget that contains a node with the name button and .back style class.

Accessibility

adw.header_bar.HeaderBar uses the gtk.types.AccessibleRole.Group role.

struct AdwHeaderBar