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.


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.

1 Like

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

1 Like

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

1 Like

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?

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

1 Like

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 class="GtkBox" id="button-box">
            <child type="start">
              <object class="GtkButton" id="open_button">
                <property name="label">Open</property>

Thanks I understood :slight_smile:

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

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

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