Simple sidebar implementation in C for GTK4

How should I create a simple sidebar containing symbolic icons? I’ve tried GtkListBox but unable to properly implement it due to my inexperience and lack of documentations.

Thank you.

Gtk.ListBox is about as simple as it gets, which part specifically are you having trouble with?

GtkWidget *list, *box, *icon, *label;

list = gtk_list_box_new ();

// Row 1
box = gtk_box_new (GTK_ORIENTATION_HORIZONTAL, 6);
gtk_list_box_append (GTK_LIST_BOX (list), box);
icon = gtk_image_new_for_icon_name ("dialog-information-symbolic");
gtk_box_append (GTK_BOX (box), icon);
label = gtk_label_new ("Item 1");
gtk_box_append (GTK_BOX (box), label);

// Row 2
box = gtk_box_new (GTK_ORIENTATION_HORIZONTAL, 6);
gtk_list_box_append (GTK_LIST_BOX (list), box);
icon = gtk_image_new_for_icon_name ("dialog-warning-symbolic");
gtk_box_append (GTK_BOX (box), icon);
label = gtk_label_new ("Item 2");
gtk_box_append (GTK_BOX (box), label);
1 Like

@andyholmes Thank you for your response! I’m having troubles due to being new to programming and the best guide I could find only works for GTK2.

I’m also confused between using a .ui file and building it locally.

Thanks to your guide I was able to implement a simple sidebar

I want to know how to:

  1. Reposition a button to the bottom corner of the toolbox.
  2. Stop the first button from being highlighted
  3. Force focus on the button only.

Again, thank you!

Here’s the code

There are some tutorials for GTK4 on the GNOME Developer website.

That’s just a choice you’ll have to make for yourself. Most people use .ui files if the widget gets reasonably complex. There is also a tutorial for that in the developer documentation.

Sounds like you want to read up about alignment in GTK4, and set the Gtk.Widget:valign and Gtk.Widget:vexpand properties on the buttons to suite your needs.

In that case, you might not want a Gtk.ListBox, but just a plain Gtk.Box instead (with the Gtk.Orientable:orientation set to GTK_ORIENTATION_VERTICAL).

If you want to force focus onto an item, you can use Gtk.Widget.grab_focus(), although you don’t usually need to that. That should generally be left to the user.

GtkBox does not produce the effect that I wanted.

I prefer to have it all in a bar or pane that GtkListBox produce. Is there a way to change how the button is highlighted or should I use GtkPaned?

I am aware of these but not sure how to implement it. Can you please post an example?

Hello, this could produce the effect you want

gtk_widget_add_css_class (list, "linked");

@gilboonet Thank you for your help but that’s not it. Ideally I want the sidebar to look similar to this

I’d recommend you look through the Widget Gallery to get an idea of what’s available.

You’re probably wanting a series of Gtk.ToggleButtons in a Gtk.ToggleButton:group. If you want it to be blue, you’ll want to read into CSS in GTK4. Or you might want to look at a stack switcher.

1 Like

I’m afraid it doesn’t confront well with GNOME HIG. You may consider using ViewSwitcher for up to five views or StackSidebar for more than five stacks.

There seems to be many different ways to implement a sidebar. For now, I’m sticking with GtkListBox but will move to StackSidebar.

1 Like