Displays a popup when clicked.
<picture> <source srcset="menu-button-dark.png"
media="(prefers-color-scheme: dark)"> <img alt="An example
GtkMenuButton" src="menu-button.png"> </picture>
This popup can be provided either as a
GtkPopover or as an
abstract
GMenuModel.
The
GtkMenuButton widget can show either an icon (set with
the
MenuButton:iconName property) or a label (set with the
MenuButton:label property). If neither is explicitly set, a
Image is automatically created, using an arrow image oriented
according to
MenuButton:direction or the generic
“open-menu-symbolic” icon if the direction is not set.
The positioning of the popup is determined by the
MenuButton:direction property of the menu button.
For menus, the
Widget:halign and
Widget:valign
properties of the menu are also taken into account. For example, when
the direction is
ArrowTypeDown and the horizontal alignment is
AlignStart, 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]
GtkMenuButton 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
GtkMenuButton uses the
AccessibleRoleButton role.