For menus, the gtk.widget.Widget.Align and gtk.widget.Widget.Align
properties of the menu are also taken into account. For example, when the
direction is gtk.types.ArrowType.Down and the horizontal alignment is gtk.types.Align.Start,
the menu will be positioned below the button, with the starting edge
(depending on the text direction) of the menu aligned with the starting
edge of the button. If there is not enough space below the button, the
menu is popped up above the button instead. If the alignment would move
part of the menu offscreen, it is “pushed in”.
gtk.menu_button.MenuButton has a single CSS node with name menubutton
which contains a button node with a .toggle style class.
If the button contains an icon, it will have the .image-button style class,
if it contains text, it will have .text-button style class. If an arrow is
visible in addition to an icon, text or a custom child, it will also have
.arrow-button style class.
Inside the toggle button content, there is an arrow node for
the indicator, which will carry one of the .none, .up, .down,
.left or .right style classes to indicate the direction that
the menu will appear in. The CSS is expected to provide a suitable
image for each of these cases using the -gtk-icon-source property.
Optionally, the menubutton node can carry the .circular style class
to request a round appearance.
The gtk.menu_button.MenuButton widget is used to display a popup when clicked.
This popup can be provided either as a gtk.popover.Popover or as an abstract gio.menu_model.MenuModel.
The gtk.menu_button.MenuButton widget can show either an icon (set with the property@Gtk.MenuButton:icon-name property) or a label (set with the gtk.menu_button.MenuButton.utf8 property). If neither is explicitly set, a gtk.image.Image is automatically created, using an arrow image oriented according to gtk.menu_button.MenuButton.ArrowType or the generic “open-menu-symbolic” icon if the direction is not set.
The positioning of the popup is determined by the gtk.menu_button.MenuButton.ArrowType property of the menu button.
For menus, the gtk.widget.Widget.Align and gtk.widget.Widget.Align properties of the menu are also taken into account. For example, when the direction is gtk.types.ArrowType.Down and the horizontal alignment is gtk.types.Align.Start, the menu will be positioned below the button, with the starting edge (depending on the text direction) of the menu aligned with the starting edge of the button. If there is not enough space below the button, the menu is popped up above the button instead. If the alignment would move part of the menu offscreen, it is “pushed in”.
| | start | center | end | | - | --- | --- | --- | | **down** |
| 
| 
|
| **up** | 
| 
| 
|
| **left** | 
| 
| 
|
| **right** | 
| 
| 
|
CSS nodes
menubutton ╰── button.toggle ╰── <content> ╰── [arrow]gtk.menu_button.MenuButton has a single CSS node with name menubutton which contains a button node with a .toggle style class.
If the button contains an icon, it will have the .image-button style class, if it contains text, it will have .text-button style class. If an arrow is visible in addition to an icon, text or a custom child, it will also have .arrow-button style class.
Inside the toggle button content, there is an arrow node for the indicator, which will carry one of the .none, .up, .down, .left or .right style classes to indicate the direction that the menu will appear in. The CSS is expected to provide a suitable image for each of these cases using the -gtk-icon-source property.
Optionally, the menubutton node can carry the .circular style class to request a round appearance.
Accessibility
gtk.menu_button.MenuButton uses the gtk.types.AccessibleRole.Button role.