How do we make a navbar with gtk?

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) March 18, 2024, 6:37pm 2

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.

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) March 18, 2024, 6:42pm 3

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

alicem (Alice Mikhaylenko) March 18, 2024, 6:43pm 4

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) March 18, 2024, 7:47pm 5

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) March 18, 2024, 7:49pm 6

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

sudhanshuv1 (Sudhanshu Tiwari) March 18, 2024, 7:55pm 7

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) March 18, 2024, 7:57pm 8

Thanks I understood

alicem (Alice Mikhaylenko) March 18, 2024, 8:01pm 9

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

alicem (Alice Mikhaylenko) March 18, 2024, 8:01pm 10

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

system (system) Closed April 17, 2024, 8:01pm 11

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

How do we make a navbar with gtk? (original) (raw)