How do we make a navbar with gtk?

[sudhanshuv1 (Sudhanshu Tiwari)]

I’m trying to write an application in which I want to display a list of buttons inside a thin horizontal strip just below the Header Bar. It is just like a navbar in websites, e.g., LibreOffice Writer has two such horizontal strip containers for buttons below the Header Bar:

How do we make a thin horizontal container in which we could add Gtk.Button’s as children? We need to set the height of this container to 25-30 pixels to achieve this, and I tried to use Gtk.Box but it doesn’t have a set_height() method or a public height property so it takes the full window height. Does any Gtk Widget has a set_height() method so that we could use it here? I’m using Vala and gtk4 to build this app and I’m a beginner so I will be grateful for any guidance related to this topic.

Thanks!

[ebassi (Emmanuele Bassi)]

This is typically called “tool bar”.

A simple implementation is to use GtkButton with an icon for each element, and then pack them into an horizontal GtkBox.

@sudhanshuv1

We need to set the height of this container to 25-30 pixels to achieve this, and I tried to use Gtk.Box but it doesn’t have a set_height() method or a public height property so it takes the full window height.

You don’t specify the size of the box: you have to use GtkImage with an icon asset that has the required size—for instance 24px—and you can use some custom CSS to tweak the padding/margin.

[alicem (Alice Mikhaylenko)]

Worth noting that the box should have .toolbar style class on it.

[alicem (Alice Mikhaylenko)]

@sudhanshuv1

so it takes the full window height.

As for this - look at AdwToolbarView. If you must use plain gtk - put it into a vertical box, not directly into a window.

[sudhanshuv1 (Sudhanshu Tiwari)]

Thanks, is it necessary for the buttons to have an icon though? What if they just have a label - like the Help button, will it not work in this case unless we have an icon for it?

[ebassi (Emmanuele Bassi)]

The “Help” button in your screenshot is not part of the toolbar: it’s a menu.

[sudhanshuv1 (Sudhanshu Tiwari)]

Thanks, I’m using libadwaita too, but when I set the GtkBox as a child of AdwToolbarView, the GtkBox takes the full window height. The AdwHeaderBar doesn’t take the full height although it is also a child of AdwToolbarView , this is my window.ui file btw:

    <property name="content">
      <object class="AdwToolbarView">
        <child type="top">
          <object class="AdwHeaderBar" id="header_bar">
            <child type="end">
              <object class="GtkMenuButton">
                <property name="primary">True</property>
                <property name="icon-name">open-menu-symbolic</property>
                <property name="tooltip-text" translatable="yes">Menu</property>
                <property name="menu-model">primary_menu</property>
              </object>
            </child>
          </object>
        </child>
        <child>
          <object class="GtkBox" id="button-box">
            <child type="start">
              <object class="GtkButton" id="open_button">
                <property name="label">Open</property>
              </object>
            </child>
          </object>
        </child>
      </object>
    </property>

[sudhanshuv1 (Sudhanshu Tiwari)]

Thanks I understood

[alicem (Alice Mikhaylenko)]

@sudhanshuv1

        <child>

Well, why <child> and not <child type="top">? But again, you need .toolbar for anything to look correct.

[alicem (Alice Mikhaylenko)]

(I mean really why not put it into the header bar you already have but whatever)