How I create a "HeaderMenu" with a Popover menu in GTK?

Question

I'm trying to create a "HeaderMenu" like this:

But only I got it:

I'm using GtkMenuButton within a GtkHeaderBar. How do I get a menu like the first picture?

Codes:

Glade file Python code

Answer 1

Starting with GTK+ 3.12, set the use-popover property of the GtkMenuButton to TRUE.

EDIT Oh, you are actually using a GtkMenu and the popup property of GtkMenuButton. For this to work, you need to switch to using the menu-model property that uses GMenu instead of a GtkMenu. And no, a GtkMenu is not a GMenu, so you cannot simply change the name of the property in the glade file. GMenus are architecturally different from GtkMenus, so you will have some rewriting to do.

Answer 2

#!/usr/bin/python3
import gi

# Popover menu button without MENU XML
# popover menu with different widgets
# using vbox container inside popover
# GPL3+ (C) Asif Ali Rizvan <[email protected]>

gi.require_version("Gtk", "3.0")
from gi.repository import Gtk, Gio
class PopoverWindow(Gtk.Window):
    def __init__(self):
        Gtk.Window.__init__(self, title="Popover Demo")
        self.set_border_width(10)
        self.set_default_size(400, 300)

        # box0 is the main box container which will hold the mb0
        box0 = Gtk.Box(spacing=6, orientation=Gtk.Orientation.VERTICAL)
        self.add(box0)

        # mb0 is Gtk.MenuButton which will include the coming popover
        mb0 = Gtk.MenuButton()
        mb0.set_label("Click Me")
        box0.pack_start(mb0, False, True, 0)

        # Create popover
        popover = Gtk.Popover()
               
        # vbox container for adding items in Popover menu
        vbox = Gtk.Box(spacing=1, orientation=Gtk.Orientation.VERTICAL)
        vbox.set_border_width(5)
        
        # 1st Gtk Entry widget
        menu_item_1= Gtk.Entry()
        #menu_item_1.set_text("Hello World")
        vbox.pack_start(menu_item_1, True, True, 5)
        
        # 2nd Gtk Toggle Button Widget
        menu_item_2= Gtk.ToggleButton()
        menu_item_2.set_label("Toggle Button")
        menu_item_2.connect("toggled", self.call_menu_item2_function)
        vbox.pack_start(menu_item_2, True, True, 5)

        # hbox is horzitontal box container for adding items sidewise 
        # in vbox of Popover menu.
        # we are packing container with widgets inside container (hbox in vbox)
        hbox = Gtk.Box(spacing=1, orientation=Gtk.Orientation.HORIZONTAL)
        hbox.set_border_width(0)
                
        # 3rd Gtk Button
        menu_item_3=Gtk.Button()
        menu_item_3.set_label("Menu Item 3")
        menu_item_3.connect("clicked", self.call_menu_item3_function)
        hbox.pack_start(menu_item_3, True, True, 5)
        
        # 4th Add quit menu item
        menu_item_4=Gtk.CheckButton()
        menu_item_4.set_label("Quit")
        menu_item_4.connect("clicked", Gtk.main_quit)
        hbox.pack_start(menu_item_4, True, True, 5)
        
        # add hbox (horizontal box) in vbox (vertical box container of popover) 
        vbox.pack_start(hbox, True, True, 0)
        
        # add the vbox container with hbox+widgets and other widgets
        # in popover menu
        popover.add(vbox)
        popover.set_position(Gtk.PositionType.BOTTOM)
        
        # add the popover inside mb0 Gtk.MenuButton()
        mb0.set_popover(popover)

        # show the widgets
        popover.show_all()
        
    def call_menu_item2_function(self,button):
        print("Menu Item 2 button Toggled")

    def call_menu_item3_function(self,button):
        print("Menu item 3 Button Clicked")
        

win = PopoverWindow()
win.connect("destroy", Gtk.main_quit)
win.show_all()
Gtk.main()