How to create a toolbar using gtk4?

Question

I am trying to create a toolbar underneath a headerbar to hold some buttons. How should I proceed with creating a toolbar using GtkBox instead of GtkToolbar that has been deprecated in GTK4?

I've tried creating a child under the titlebar but it doesn't display anything. There is no information available online :(

 <child type="titlebar">
      <object class="GtkHeaderBar" id="header">
      <!-- some children that includes title and some buttons -->

        </object>
      </object>
    </child> 

   <!-- How to create a horizontal toolbar that will hold some button right underneath the header bar? -->
   <child type="toolbar">
      <object class="GtkBox" id="toolbar">

      </object>

    </child>

Answer 1

A toolbar is basically a Gtk.Box with a "toolbar" style. It must be inserted as a child of the window, not as a child of the headerbar, and remember that a window can only have one child. Below is a simple example.

<?xml version="1.0" encoding="UTF-8"?>
<interface>
  <requires lib="gtk" version="4.0"/>
  <object class="GtkWindow" id="window">
    <property name="default-width">800</property>
    <property name="default-height">600</property>
    <property name="title" translatable="true">My App</property>
    <property name="titlebar">
      <object class="GtkHeaderBar">
        <child type="end">
          <object class="GtkMenuButton" id="button_menu">
            <property name="icon-name">open-menu-symbolic</property>
            <property name="primary">true</property>
          </object>
        </child>
      </object>
    </property>
    <child>
      <object class="GtkBox">
        <property name="orientation">1</property>
        <child>
          <object class="GtkBox">
            <style>
              <class name="toolbar"/>
            </style>
            <property name="hexpand">true</property>
            <property name="halign">3</property>
            <child>
              <object class="GtkButton">
                <property name="label">buton01</property>
              </object>
            </child>
            <child>
              <object class="GtkButton">
                <property name="label">buton02</property>
              </object>
            </child>
            <child>
              <object class="GtkButton">
                <property name="label">buton03</property>
              </object>
            </child>
          </object>
        </child>
        <child>
          <object class="AdwStatusPage">
            <property name="title">Any other window element</property>
          </object>
        </child>
      </object>
    </child>
  </object>
</interface>

I also recommend using Workbech to model UI in gtk4, it makes the work much easier.