gem-graph/gem-graph-client
gem-graph
/
gem-graph-client
3
0
Fork 0
Code Issues 14 Pull Requests Projects Releases Activity
gem-graph-client/docs/GTK-docs/gnome-dev-documentation/developer.gnome.org/documentation/tutorials/menus.html

544 lines
53 KiB
HTML
Raw Normal View History

docs/*: integrate doxygen, create a documentation zone, adds notes We wanted to have an automated documentation for our project. We choose doxygen since this is a well-established project, with common standards. To generate the documentation, simply type `make docs` and open `docs/html/index.html`. The documentation zone actually contains: - archives: several files from past of the projects, historical purpose - GTK-docs: ressources on GTK internals and API - rtfm: first draft of a user manual - showcase: some pictures of the UI example, that were communicated on the Gem-graph discussion room (XMPP) - html: doxygen-generated docs
2024-10-28 13:57:44 +01:00
<!doctype html>
<html class="no-js">
<head><meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<meta name="color-scheme" content="light dark"><meta name="generator" content="Docutils 0.17.1: http://docutils.sourceforge.net/" />
<link rel="index" title="Index" href="../genindex.html" /><link rel="search" title="Search" href="../search.html" /><link rel="next" title="Writing a Search Provider" href="search-provider.html" /><link rel="prev" title="Actions" href="actions.html" />
<meta name="generator" content="sphinx-4.3.0, furo 2022.06.21"/>
<title>Menus - GNOME Developer Documentation</title>
<link rel="stylesheet" type="text/css" href="../_static/pygments.css" />
<link rel="stylesheet" type="text/css" href="../_static/styles/furo.css?digest=40978830699223671f4072448e654b5958f38b89" />
<link rel="stylesheet" type="text/css" href="../_static/tabs.css" />
<link rel="stylesheet" type="text/css" href="../_static/styles/furo-extensions.css?digest=30d1aed668e5c3a91c3e3bf6a60b675221979f0e" />
<link rel="stylesheet" type="text/css" href="../_static/gnome.css" />
<style>
body {
--color-code-background: #f8f8f8;
--color-code-foreground: black;
--color-brand-primary: #4a86cf;
--color-brand-content: #4a86cf;
}
@media not print {
body[data-theme="dark"] {
--color-code-background: #202020;
--color-code-foreground: #d0d0d0;
}
@media (prefers-color-scheme: dark) {
body:not([data-theme="light"]) {
--color-code-background: #202020;
--color-code-foreground: #d0d0d0;
}
}
}
</style></head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="svg-toc" viewBox="0 0 24 24">
<title>Contents</title>
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024">
<path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM115.4 518.9L271.7 642c5.8 4.6 14.4.5 14.4-6.9V388.9c0-7.4-8.5-11.5-14.4-6.9L115.4 505.1a8.74 8.74 0 0 0 0 13.8z"/>
</svg>
</symbol>
<symbol id="svg-menu" viewBox="0 0 24 24">
<title>Menu</title>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather-menu">
<line x1="3" y1="12" x2="21" y2="12"></line>
<line x1="3" y1="6" x2="21" y2="6"></line>
<line x1="3" y1="18" x2="21" y2="18"></line>
</svg>
</symbol>
<symbol id="svg-arrow-right" viewBox="0 0 24 24">
<title>Expand</title>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather-chevron-right">
<polyline points="9 18 15 12 9 6"></polyline>
</svg>
</symbol>
<symbol id="svg-sun" viewBox="0 0 24 24">
<title>Light mode</title>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather-sun">
<circle cx="12" cy="12" r="5"></circle>
<line x1="12" y1="1" x2="12" y2="3"></line>
<line x1="12" y1="21" x2="12" y2="23"></line>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
<line x1="1" y1="12" x2="3" y2="12"></line>
<line x1="21" y1="12" x2="23" y2="12"></line>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
</svg>
</symbol>
<symbol id="svg-moon" viewBox="0 0 24 24">
<title>Dark mode</title>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="icon-tabler-moon">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" />
</svg>
</symbol>
<symbol id="svg-sun-half" viewBox="0 0 24 24">
<title>Auto light/dark mode</title>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="icon-tabler-shadow">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<circle cx="12" cy="12" r="9" />
<path d="M13 12h5" />
<path d="M13 15h4" />
<path d="M13 18h1" />
<path d="M13 9h4" />
<path d="M13 6h1" />
</svg>
</symbol>
</svg>
<input type="checkbox" class="sidebar-toggle" name="__navigation" id="__navigation">
<input type="checkbox" class="sidebar-toggle" name="__toc" id="__toc">
<label class="overlay sidebar-overlay" for="__navigation"></label>
<label class="overlay toc-overlay" for="__toc"></label>
<div class="page">
<header class="mobile-header">
<div class="header-left">
<label class="nav-overlay-icon" for="__navigation">
<i class="icon"><svg><use href="#svg-menu"></use></svg></i>
</label>
</div>
<div class="header-center">
<a href="../index.html"><div class="brand">GNOME Developer Documentation</div></a>
</div>
<div class="header-right">
<label class="toc-overlay-icon toc-header-icon" for="__toc">
<i class="icon"><svg><use href="#svg-toc"></use></svg></i>
</label>
</div>
</header>
<aside class="sidebar-drawer">
<div class="sidebar-container">
<div class="sidebar-sticky"><a class="sidebar-brand" href="../index.html">
<span class="sidebar-brand-text">GNOME Developer Documentation</span>
</a><form class="sidebar-search-container" method="get" action="../search.html" role="search">
<input class="sidebar-search" placeholder=Search name="q" aria-label="Search">
<input type="hidden" name="check_keywords" value="yes">
<input type="hidden" name="area" value="default">
</form>
<div id="searchbox"></div><div class="sidebar-scroll"><div class="sidebar-tree">
<p class="caption" role="heading"><span class="caption-text">Contents</span></p>
<ul class="current">
<li class="toctree-l1 has-children"><a class="reference internal" href="../introduction.html">Platform Introduction</a><input class="toctree-checkbox" id="toctree-checkbox-1" name="toctree-checkbox-1" role="switch" type="checkbox"/><label for="toctree-checkbox-1"><div class="visually-hidden">Toggle child pages in navigation</div><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
<li class="toctree-l2 has-children"><a class="reference internal" href="../introduction/components.html">Platform Components</a><input class="toctree-checkbox" id="toctree-checkbox-2" name="toctree-checkbox-2" role="switch" type="checkbox"/><label for="toctree-checkbox-2"><div class="visually-hidden">Toggle child pages in navigation</div><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
<li class="toctree-l3"><a class="reference internal" href="../introduction/overview/libraries.html">Libraries</a></li>
<li class="toctree-l3"><a class="reference internal" href="../introduction/overview/services.html">Services</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../introduction/languages.html">Programming Languages</a></li>
<li class="toctree-l2"><a class="reference internal" href="../introduction/builder.html">GNOME Builder</a></li>
<li class="toctree-l2"><a class="reference internal" href="../introduction/flatpak.html">Flatpak</a></li>
</ul>
</li>
<li class="toctree-l1 has-children"><a class="reference internal" href="../guidelines.html">Guidelines</a><input class="toctree-checkbox" id="toctree-checkbox-3" name="toctree-checkbox-3" role="switch" type="checkbox"/><label for="toctree-checkbox-3"><div class="visually-hidden">Toggle child pages in navigation</div><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
<li class="toctree-l2 has-children"><a class="reference internal" href="../guidelines/programming.html">Programming Guidelines</a><input class="toctree-checkbox" id="toctree-checkbox-4" name="toctree-checkbox-4" role="switch" type="checkbox"/><label for="toctree-checkbox-4"><div class="visually-hidden">Toggle child pages in navigation</div><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
<li class="toctree-l3"><a class="reference internal" href="../guidelines/programming/coding-style.html">C Coding Style</a></li>
<li class="toctree-l3"><a class="reference internal" href="../guidelines/programming/memory-management.html">Managing Memory</a></li>
<li class="toctree-l3"><a class="reference internal" href="../guidelines/programming/writing-good-code.html">The Importance of Writing Good Code</a></li>
<li class="toctree-l3"><a class="reference internal" href="../guidelines/programming/optimizing.html">Optimizing GNOME Applications</a></li>
<li class="toctree-l3"><a class="reference internal" href="../guidelines/programming/namespacing.html">Namespacing</a></li>
<li class="toctree-l3"><a class="reference internal" href="../guidelines/programming/introspection.html">Introspection</a></li>
</ul>
</li>
<li class="toctree-l2 has-children"><a class="reference internal" href="../guidelines/accessibility.html">Accessibility</a><input class="toctree-checkbox" id="toctree-checkbox-5" name="toctree-checkbox-5" role="switch" type="checkbox"/><label for="toctree-checkbox-5"><div class="visually-hidden">Toggle child pages in navigation</div><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
<li class="toctree-l3"><a class="reference internal" href="../guidelines/accessibility/coding-guidelines.html">Coding Guidelines for Supporting Accessibility</a></li>
<li class="toctree-l3"><a class="reference internal" href="../guidelines/accessibility/custom-widgets.html">Making Custom Components Accessible</a></li>
</ul>
</li>
<li class="toctree-l2 has-children"><a class="reference internal" href="../guidelines/localization.html">Localization</a><input class="toctree-checkbox" id="toctree-checkbox-6" name="toctree-checkbox-6" role="switch" type="checkbox"/><label for="toctree-checkbox-6"><div class="visually-hidden">Toggle child pages in navigation</div><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
<li class="toctree-l3"><a class="reference internal" href="../guidelines/localization/practices.html">Best Practices for Localization</a></li>
</ul>
</li>
<li class="toctree-l2 has-children"><a class="reference internal" href="../guidelines/maintainer.html">Maintainer Guidelines</a><input class="toctree-checkbox" id="toctree-checkbox-7" name="toctree-checkbox-7" role="switch" type="checkbox"/><label for="toctree-checkbox-7"><div class="visually-hidden">Toggle child pages in navigation</div><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
<li class="toctree-l3"><a class="reference internal" href="../guidelines/maintainer/api-stability.html">API Stability</a></li>
<li class="toctree-l3"><a class="reference internal" href="../guidelines/maintainer/parallel-installability.html">Parallel Installability</a></li>
<li class="toctree-l3"><a class="reference internal" href="../guidelines/maintainer/integrating.html">Integrating with GNOME</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../guidelines/devel-docs.html">Developer Documentation Style Guidelines</a></li>
</ul>
</li>
<li class="toctree-l1 current has-children"><a class="reference internal" href="../tutorials.html">Tutorials</a><input checked="" class="toctree-checkbox" id="toctree-checkbox-8" name="toctree-checkbox-8" role="switch" type="checkbox"/><label for="toctree-checkbox-8"><div class="visually-hidden">Toggle child pages in navigation</div><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul class="current">
<li class="toctree-l2 has-children"><a class="reference internal" href="beginners.html">Beginners Tutorials</a><input class="toctree-checkbox" id="toctree-checkbox-9" name="toctree-checkbox-9" role="switch" type="checkbox"/><label for="toctree-checkbox-9"><div class="visually-hidden">Toggle child pages in navigation</div><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
<li class="toctree-l3 has-children"><a class="reference internal" href="beginners/getting_started.html">Getting Started</a><input class="toctree-checkbox" id="toctree-checkbox-10" name="toctree-checkbox-10" role="switch" type="checkbox"/><label for="toctree-checkbox-10"><div class="visually-hidden">Toggle child pages in navigation</div><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
<li class="toctree-l4"><a class="reference internal" href="beginners/getting_started/content_view.html">Adding A Content View</a></li>
<li class="toctree-l4"><a class="reference internal" href="beginners/getting_started/opening_files.html">Loading Content From A File</a></li>
<li class="toctree-l4"><a class="reference internal" href="beginners/getting_started/cursor_position.html">Showing The Cursor Position</a></li>
<li class="toctree-l4"><a class="reference internal" href="beginners/getting_started/saving_files.html">Saving The Content To A File</a></li>
<li class="toctree-l4"><a class="reference internal" href="beginners/getting_started/saving_state.html">Saving The Application State</a></li>
<li class="toctree-l4"><a class="reference internal" href="beginners/getting_started/adding_toasts.html">Notifying The User With Toasts</a></li>
<li class="toctree-l4"><a class="reference internal" href="beginners/getting_started/dark_mode.html">Forcing The Dark Color Scheme</a></li>
</ul>
</li>
<li class="toctree-l3 has-children"><a class="reference internal" href="beginners/components.html">UI components</a><input class="toctree-checkbox" id="toctree-checkbox-11" name="toctree-checkbox-11" role="switch" type="checkbox"/><label for="toctree-checkbox-11"><div class="visually-hidden">Toggle child pages in navigation</div><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
<li class="toctree-l4"><a class="reference internal" href="beginners/components/window.html">Windows</a></li>
<li class="toctree-l4"><a class="reference internal" href="beginners/components/image.html">Images</a></li>
<li class="toctree-l4"><a class="reference internal" href="beginners/components/label.html">Labels</a></li>
<li class="toctree-l4"><a class="reference internal" href="beginners/components/button.html">Buttons</a></li>
<li class="toctree-l4"><a class="reference internal" href="beginners/components/box.html">Boxes</a></li>
<li class="toctree-l4"><a class="reference internal" href="beginners/components/stack.html">Stacks</a></li>
<li class="toctree-l4"><a class="reference internal" href="beginners/components/leaflet.html">Leaflets</a></li>
<li class="toctree-l4"><a class="reference internal" href="beginners/components/toggle.html">Toggles</a></li>
<li class="toctree-l4"><a class="reference internal" href="beginners/components/check_box.html">Check Boxes</a></li>
<li class="toctree-l4"><a class="reference internal" href="beginners/components/radio_button.html">Radio Buttons</a></li>
<li class="toctree-l4"><a class="reference internal" href="beginners/components/spin_button.html">Spin Buttons</a></li>
<li class="toctree-l4"><a class="reference internal" href="beginners/components/link_button.html">Link Buttons</a></li>
<li class="toctree-l4"><a class="reference internal" href="beginners/components/switch.html">Switches</a></li>
<li class="toctree-l4"><a class="reference internal" href="beginners/components/menu_button.html">Menu Buttons</a></li>
<li class="toctree-l4"><a class="reference internal" href="beginners/components/entry.html">Entries</a></li>
<li class="toctree-l4"><a class="reference internal" href="beginners/components/password_entry.html">Password Entries</a></li>
<li class="toctree-l4"><a class="reference internal" href="beginners/components/message_dialog.html">Messages</a></li>
<li class="toctree-l4"><a class="reference internal" href="beginners/components/file_dialog.html">File Dialogs</a></li>
<li class="toctree-l4"><a class="reference internal" href="beginners/components/spinner.html">Spinners</a></li>
<li class="toctree-l4"><a class="reference internal" href="beginners/components/level_bar.html">Level Bars</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="application-id.html">Application ID</a></li>
<li class="toctree-l2"><a class="reference internal" href="application.html">Using GtkApplication</a></li>
<li class="toctree-l2"><a class="reference internal" href="save-state.html">Saving and Loading Window State</a></li>
<li class="toctree-l2"><a class="reference internal" href="notifications.html">Using Notifications</a></li>
<li class="toctree-l2"><a class="reference internal" href="themed-icons.html">Themed Icons</a></li>
<li class="toctree-l2"><a class="reference internal" href="deprecations.html">Dealing With Deprecations</a></li>
<li class="toctree-l2"><a class="reference internal" href="actions.html">Actions</a></li>
<li class="toctree-l2 current current-page"><a class="current reference internal" href="#">Menus</a></li>
<li class="toctree-l2"><a class="reference internal" href="search-provider.html">Writing a Search Provider</a></li>
<li class="toctree-l2"><a class="reference internal" href="pre-and-post-conditions.html">Pre- and Post-Conditions</a></li>
<li class="toctree-l2"><a class="reference internal" href="main-contexts.html">Main Contexts</a></li>
<li class="toctree-l2"><a class="reference internal" href="lists.html">Using GLib Lists</a></li>
<li class="toctree-l2"><a class="reference internal" href="threading.html">Threading</a></li>
<li class="toctree-l2"><a class="reference internal" href="asynchronous-programming.html">Asynchronous Programming</a></li>
<li class="toctree-l2"><a class="reference internal" href="drag-and-drop.html">Drag and Drop</a></li>
<li class="toctree-l2"><a class="reference internal" href="widget-templates.html">Widget Templates</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</aside>
<main class="main">
<div class="content">
<article role="main">
<label class="toc-overlay-icon toc-content-icon" for="__toc">
<i class="icon"><svg><use href="#svg-toc"></use></svg></i>
</label>
<section id="menus">
<h1>Menus<a class="headerlink" href="#menus" title="Permalink to this headline">#</a></h1>
<p>In order to create <a class="reference external" href="https://developer.gnome.org/hig/patterns/controls/menus.html">menus</a> in GTK, you
have to describe the menu structure using the <code class="docutils literal notranslate"><span class="pre">GMenu</span></code> API; each menu item is
bound to a <a class="reference internal" href="actions.html"><span class="doc">GAction</span></a>.</p>
<p>It is possible to construct a menu model manually, using the GMenu APIs
directly. This is a somewhat painful:</p>
<div class="sphinx-tabs docutils container">
<div aria-label="Tabbed content" class="closeable" role="tablist"><button aria-controls="panel-0-Qw==" aria-selected="true" class="sphinx-tabs-tab code-tab group-tab" id="tab-0-Qw==" name="Qw==" role="tab" tabindex="0">C</button><button aria-controls="panel-0-UHl0aG9u" aria-selected="false" class="sphinx-tabs-tab code-tab group-tab" id="tab-0-UHl0aG9u" name="UHl0aG9u" role="tab" tabindex="-1">Python</button><button aria-controls="panel-0-SmF2YVNjcmlwdA==" aria-selected="false" class="sphinx-tabs-tab code-tab group-tab" id="tab-0-SmF2YVNjcmlwdA==" name="SmF2YVNjcmlwdA==" role="tab" tabindex="-1">JavaScript</button><button aria-controls="panel-0-VmFsYQ==" aria-selected="false" class="sphinx-tabs-tab code-tab group-tab" id="tab-0-VmFsYQ==" name="VmFsYQ==" role="tab" tabindex="-1">Vala</button><button aria-controls="panel-0-WE1M" aria-selected="false" class="sphinx-tabs-tab code-tab group-tab" id="tab-0-WE1M" name="WE1M" role="tab" tabindex="-1">XML</button></div><div aria-labelledby="tab-0-Qw==" class="sphinx-tabs-panel code-tab group-tab" id="panel-0-Qw==" name="Qw==" role="tabpanel" tabindex="0"><div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="n">GMenu</span><span class="w"> </span><span class="o">*</span><span class="n">menu</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">g_menu_new</span><span class="w"> </span><span class="p">();</span><span class="w"></span>
<span class="c1">// The &quot;Offensive Spells&quot; section</span>
<span class="n">GMenu</span><span class="w"> </span><span class="o">*</span><span class="n">section</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">g_menu_new</span><span class="w"> </span><span class="p">();</span><span class="w"></span>
<span class="c1">// g_menu_append() creates a menu item for you</span>
<span class="n">g_menu_append</span><span class="w"> </span><span class="p">(</span><span class="n">section</span><span class="p">,</span><span class="w"> </span><span class="s">&quot;Incendio&quot;</span><span class="p">,</span><span class="w"> </span><span class="s">&quot;app.incendio&quot;</span><span class="p">);</span><span class="w"></span>
<span class="n">g_menu_append_section</span><span class="w"> </span><span class="p">(</span><span class="n">menu</span><span class="p">,</span><span class="w"> </span><span class="s">&quot;Offensive Spells&quot;</span><span class="p">,</span><span class="w"> </span><span class="n">section</span><span class="p">);</span><span class="w"></span>
<span class="n">g_object_unref</span><span class="w"> </span><span class="p">(</span><span class="n">section</span><span class="p">);</span><span class="w"></span>
<span class="c1">// The &quot;Defensive Charms&quot; section</span>
<span class="n">section</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">g_menu_new</span><span class="w"> </span><span class="p">();</span><span class="w"></span>
<span class="c1">// An explicit menu item</span>
<span class="n">GMenuItem</span><span class="w"> </span><span class="o">*</span><span class="n">item</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">g_menu_item_new</span><span class="w"> </span><span class="p">(</span><span class="s">&quot;Expelliarmus&quot;</span><span class="p">,</span><span class="w"> </span><span class="s">&quot;app.expelliarmus&quot;</span><span class="p">);</span><span class="w"></span>
<span class="c1">// &quot;defensive_icon&quot; is a GIcon and is defined elsewhere</span>
<span class="n">g_menu_item_set_icon</span><span class="w"> </span><span class="p">(</span><span class="n">item</span><span class="p">,</span><span class="w"> </span><span class="n">defensive_icon</span><span class="p">);</span><span class="w"></span>
<span class="n">g_menu_append_item</span><span class="w"> </span><span class="p">(</span><span class="n">section</span><span class="p">,</span><span class="w"> </span><span class="n">item</span><span class="p">);</span><span class="w"></span>
<span class="n">g_menu_append_section</span><span class="w"> </span><span class="p">(</span><span class="n">menu</span><span class="p">,</span><span class="w"> </span><span class="s">&quot;Defensive Charms&quot;</span><span class="p">,</span><span class="w"> </span><span class="n">section</span><span class="p">);</span><span class="w"></span>
<span class="n">g_object_unref</span><span class="w"> </span><span class="p">(</span><span class="n">section</span><span class="p">);</span><span class="w"></span>
</pre></div>
</div>
</div><div aria-labelledby="tab-0-UHl0aG9u" class="sphinx-tabs-panel code-tab group-tab" hidden="true" id="panel-0-UHl0aG9u" name="UHl0aG9u" role="tabpanel" tabindex="0"><div class="highlight-python notranslate"><div class="highlight"><pre><span></span><span class="n">menu</span> <span class="o">=</span> <span class="n">Gio</span><span class="o">.</span><span class="n">Menu</span><span class="p">()</span>
<span class="c1"># The &quot;Offensive Spells&quot; section</span>
<span class="n">section</span> <span class="o">=</span> <span class="n">Gio</span><span class="o">.</span><span class="n">Menu</span><span class="p">()</span>
<span class="c1"># Gio.Menu.append() creates a menu item for you</span>
<span class="n">section</span><span class="o">.</span><span class="n">append</span><span class="p">(</span><span class="s2">&quot;Incendio&quot;</span><span class="p">,</span> <span class="s2">&quot;app.incendio&quot;</span><span class="p">)</span>
<span class="n">menu</span><span class="o">.</span><span class="n">append_section</span><span class="p">(</span><span class="s2">&quot;Offensive Spells&quot;</span><span class="p">,</span> <span class="n">section</span><span class="p">)</span>
<span class="c1"># The &quot;Defensive Charms&quot; section</span>
<span class="n">section</span> <span class="o">=</span> <span class="n">Gio</span><span class="o">.</span><span class="n">Menu</span><span class="p">()</span>
<span class="c1"># An explicit menu item</span>
<span class="n">item</span> <span class="o">=</span> <span class="n">Gio</span><span class="o">.</span><span class="n">MenuItem</span><span class="p">()</span>
<span class="n">item</span><span class="o">.</span><span class="n">set_label</span><span class="p">(</span><span class="s2">&quot;Expelliarmus&quot;</span><span class="p">)</span>
<span class="n">item</span><span class="o">.</span><span class="n">set_detailed_action</span><span class="p">(</span><span class="s2">&quot;app.expelliarmus&quot;</span><span class="p">)</span>
<span class="c1"># &quot;defensive_icon&quot; is a Gio.Icon and is defined elsewhere</span>
<span class="n">item</span><span class="o">.</span><span class="n">set_icon</span><span class="p">(</span><span class="n">defensive_icon</span><span class="p">)</span>
<span class="n">section</span><span class="o">.</span><span class="n">append_item</span><span class="p">(</span><span class="n">item</span><span class="p">)</span>
<span class="n">menu</span><span class="o">.</span><span class="n">append_section</span><span class="p">(</span><span class="s2">&quot;Defensive Charms&quot;</span><span class="p">,</span> <span class="n">section</span><span class="p">)</span>
</pre></div>
</div>
</div><div aria-labelledby="tab-0-SmF2YVNjcmlwdA==" class="sphinx-tabs-panel code-tab group-tab" hidden="true" id="panel-0-SmF2YVNjcmlwdA==" name="SmF2YVNjcmlwdA==" role="tabpanel" tabindex="0"><div class="highlight-js notranslate"><div class="highlight"><pre><span></span><span class="kd">const</span><span class="w"> </span><span class="nx">menu</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nx">Gio</span><span class="p">.</span><span class="nx">Menu</span><span class="p">();</span><span class="w"></span>
<span class="c1">// The &quot;Offensive Spells&quot; section</span><span class="w"></span>
<span class="kd">let</span><span class="w"> </span><span class="nx">section</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nx">Gio</span><span class="p">.</span><span class="nx">Menu</span><span class="p">();</span><span class="w"></span>
<span class="c1">// Gio.Menu.append() creates a menu item for you</span><span class="w"></span>
<span class="nx">section</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="s2">&quot;Incendio&quot;</span><span class="p">,</span><span class="w"> </span><span class="s2">&quot;app.incendio&quot;</span><span class="p">);</span><span class="w"></span>
<span class="nx">menu</span><span class="p">.</span><span class="nx">append_section</span><span class="p">(</span><span class="s2">&quot;Offensive Spells&quot;</span><span class="p">,</span><span class="w"> </span><span class="nx">section</span><span class="p">);</span><span class="w"></span>
<span class="c1">// The &quot;Defensive Charms&quot; section</span><span class="w"></span>
<span class="nx">section</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nx">Gio</span><span class="p">.</span><span class="nx">Menu</span><span class="p">();</span><span class="w"></span>
<span class="c1">// An explicit menu item</span><span class="w"></span>
<span class="kd">const</span><span class="w"> </span><span class="nx">item</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nx">Gio</span><span class="p">.</span><span class="nx">MenuItem</span><span class="p">();</span><span class="w"></span>
<span class="nx">item</span><span class="p">.</span><span class="nx">set_label</span><span class="p">(</span><span class="s2">&quot;Expelliarmus&quot;</span><span class="p">);</span><span class="w"></span>
<span class="nx">item</span><span class="p">.</span><span class="nx">set_detailed_action</span><span class="p">(</span><span class="s2">&quot;app.expelliarmus&quot;</span><span class="p">);</span><span class="w"></span>
<span class="c1">// &quot;defensive_icon&quot; is a Gio.Icon and is defined elsewhere</span><span class="w"></span>
<span class="nx">item</span><span class="p">.</span><span class="nx">set_icon</span><span class="p">(</span><span class="nx">defensive_icon</span><span class="p">);</span><span class="w"></span>
<span class="nx">section</span><span class="p">.</span><span class="nx">append_item</span><span class="p">(</span><span class="nx">item</span><span class="p">);</span><span class="w"></span>
<span class="nx">menu</span><span class="p">.</span><span class="nx">append_section</span><span class="p">(</span><span class="s2">&quot;Defensive Charms&quot;</span><span class="p">,</span><span class="w"> </span><span class="nx">section</span><span class="p">);</span><span class="w"></span>
</pre></div>
</div>
</div><div aria-labelledby="tab-0-VmFsYQ==" class="sphinx-tabs-panel code-tab group-tab" hidden="true" id="panel-0-VmFsYQ==" name="VmFsYQ==" role="tabpanel" tabindex="0"><div class="highlight-vala notranslate"><div class="highlight"><pre><span></span><span class="kd">var</span><span class="w"> </span><span class="n">menu</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">new</span><span class="w"> </span><span class="n">Menu</span><span class="w"> </span><span class="p">();</span><span class="w"></span>
<span class="c1">// The &quot;Offensive Spells&quot; section</span>
<span class="kd">var</span><span class="w"> </span><span class="n">section</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">new</span><span class="w"> </span><span class="n">Menu</span><span class="w"> </span><span class="p">();</span><span class="w"></span>
<span class="n">section</span><span class="p">.</span><span class="n">append</span><span class="w"> </span><span class="p">(</span><span class="s">&quot;Incendio&quot;</span><span class="p">,</span><span class="w"> </span><span class="s">&quot;app.incendio&quot;</span><span class="p">);</span><span class="w"></span>
<span class="n">menu</span><span class="p">.</span><span class="n">append_section</span><span class="w"> </span><span class="p">(</span><span class="s">&quot;Offensice Spells&quot;</span><span class="p">,</span><span class="w"> </span><span class="n">section</span><span class="p">);</span><span class="w"></span>
<span class="c1">// The &quot;Defensive Charms&quot; section</span>
<span class="n">section</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">new</span><span class="w"> </span><span class="n">Menu</span><span class="w"> </span><span class="p">();</span><span class="w"></span>
<span class="c1">// an explicit menu item</span>
<span class="kd">var</span><span class="w"> </span><span class="n">item</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">new</span><span class="w"> </span><span class="n">MenuItem</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
<span class="w"> </span><span class="n">label</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">&quot;Expelliarmus&quot;</span><span class="p">,</span><span class="w"></span>
<span class="w"> </span><span class="n">detailed_action</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">&quot;app.expelliarmus&quot;</span><span class="w"></span>
<span class="p">};</span><span class="w"></span>
<span class="c1">// &quot;defensive_icon&quot; is a GLib.Icon and is defined elsewhere</span>
<span class="n">menu</span><span class="p">.</span><span class="n">append_section</span><span class="w"> </span><span class="p">(</span><span class="s">&quot;Defensive Charms&quot;</span><span class="p">,</span><span class="w"> </span><span class="n">section</span><span class="p">);</span><span class="w"></span>
</pre></div>
</div>
</div><div aria-labelledby="tab-0-WE1M" class="sphinx-tabs-panel code-tab group-tab" hidden="true" id="panel-0-WE1M" name="WE1M" role="tabpanel" tabindex="0"><div class="highlight-xml notranslate"><div class="highlight"><pre><span></span><span class="nt">&lt;interface&gt;</span>
<span class="nt">&lt;menu</span> <span class="na">id=</span><span class="s">&quot;menu&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;section&gt;</span>
<span class="nt">&lt;item&gt;</span>
<span class="nt">&lt;attribute</span> <span class="na">name=</span><span class="s">&quot;label&quot;</span> <span class="na">translatable=</span><span class="s">&quot;yes&quot;</span><span class="nt">&gt;</span>Incendio<span class="nt">&lt;/attribute&gt;</span>
<span class="nt">&lt;attribute</span> <span class="na">name=</span><span class="s">&quot;action&quot;</span><span class="nt">&gt;</span>app.incendio<span class="nt">&lt;/attribute&gt;</span>
<span class="nt">&lt;/item&gt;</span>
<span class="nt">&lt;/section&gt;</span>
<span class="nt">&lt;section&gt;</span>
<span class="nt">&lt;attribute</span> <span class="na">name=</span><span class="s">&quot;label&quot;</span> <span class="na">translatable=</span><span class="s">&quot;yes&quot;</span><span class="nt">&gt;</span>Defensive Charms<span class="nt">&lt;/attribute&gt;</span>
<span class="nt">&lt;item&gt;</span>
<span class="nt">&lt;attribute</span> <span class="na">name=</span><span class="s">&quot;label&quot;</span> <span class="na">translatable=</span><span class="s">&quot;yes&quot;</span><span class="nt">&gt;</span>Expelliarmus<span class="nt">&lt;/attribute&gt;</span>
<span class="nt">&lt;attribute</span> <span class="na">name=</span><span class="s">&quot;action&quot;</span><span class="nt">&gt;</span>app.expelliarmus<span class="nt">&lt;/attribute&gt;</span>
<span class="nt">&lt;attribute</span> <span class="na">name=</span><span class="s">&quot;icon&quot;</span><span class="nt">&gt;</span>/usr/share/my-app/poof!.png<span class="nt">&lt;/attribute&gt;</span>
<span class="nt">&lt;/item&gt;</span>
<span class="nt">&lt;/section&gt;</span>
<span class="nt">&lt;/menu&gt;</span>
<span class="nt">&lt;/interface&gt;</span>
</pre></div>
</div>
</div></div>
<p>In your code, you then create the GMenuModel using a GtkBuilder:</p>
<div class="sphinx-tabs docutils container">
<div aria-label="Tabbed content" class="closeable" role="tablist"><button aria-controls="panel-1-Qw==" aria-selected="true" class="sphinx-tabs-tab code-tab group-tab" id="tab-1-Qw==" name="Qw==" role="tab" tabindex="0">C</button><button aria-controls="panel-1-UHl0aG9u" aria-selected="false" class="sphinx-tabs-tab code-tab group-tab" id="tab-1-UHl0aG9u" name="UHl0aG9u" role="tab" tabindex="-1">Python</button><button aria-controls="panel-1-SmF2YVNjcmlwdA==" aria-selected="false" class="sphinx-tabs-tab code-tab group-tab" id="tab-1-SmF2YVNjcmlwdA==" name="SmF2YVNjcmlwdA==" role="tab" tabindex="-1">JavaScript</button><button aria-controls="panel-1-VmFsYQ==" aria-selected="false" class="sphinx-tabs-tab code-tab group-tab" id="tab-1-VmFsYQ==" name="VmFsYQ==" role="tab" tabindex="-1">Vala</button></div><div aria-labelledby="tab-1-Qw==" class="sphinx-tabs-panel code-tab group-tab" id="panel-1-Qw==" name="Qw==" role="tabpanel" tabindex="0"><div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="n">GtkBuilder</span><span class="w"> </span><span class="o">*</span><span class="n">builder</span><span class="w"> </span><span class="o">=</span><span class="w"></span>
<span class="w"> </span><span class="n">gtk_builder_new_from_resource</span><span class="w"> </span><span class="p">(</span><span class="s">&quot;/my/favourite/spells/menu.ui&quot;</span><span class="p">);</span><span class="w"></span>
<span class="n">GMenu</span><span class="w"> </span><span class="o">*</span><span class="n">menu</span><span class="w"> </span><span class="o">=</span><span class="w"></span>
<span class="w"> </span><span class="n">G_MENU_MODEL</span><span class="w"> </span><span class="p">(</span><span class="n">gtk_builder_get_object</span><span class="w"> </span><span class="p">(</span><span class="s">&quot;menu&quot;</span><span class="p">);</span><span class="w"></span>
</pre></div>
</div>
</div><div aria-labelledby="tab-1-UHl0aG9u" class="sphinx-tabs-panel code-tab group-tab" hidden="true" id="panel-1-UHl0aG9u" name="UHl0aG9u" role="tabpanel" tabindex="0"><div class="highlight-python notranslate"><div class="highlight"><pre><span></span><span class="n">builder</span> <span class="o">=</span> <span class="n">Gtk</span><span class="o">.</span><span class="n">Builder</span><span class="o">.</span><span class="n">new_from_resource</span><span class="p">(</span><span class="s2">&quot;/my/favourite/spells/menu.ui&quot;</span><span class="p">)</span>
<span class="n">menu</span> <span class="o">=</span> <span class="n">builder</span><span class="o">.</span><span class="n">get_object</span><span class="p">(</span><span class="s2">&quot;menu&quot;</span><span class="p">)</span>
</pre></div>
</div>
</div><div aria-labelledby="tab-1-SmF2YVNjcmlwdA==" class="sphinx-tabs-panel code-tab group-tab" hidden="true" id="panel-1-SmF2YVNjcmlwdA==" name="SmF2YVNjcmlwdA==" role="tabpanel" tabindex="0"><div class="highlight-js notranslate"><div class="highlight"><pre><span></span><span class="kd">const</span><span class="w"> </span><span class="nx">builder</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Gtk</span><span class="p">.</span><span class="nx">Builder</span><span class="p">.</span><span class="nx">new_from_resource</span><span class="p">(</span><span class="s2">&quot;/my/favourite/spells/menu.ui&quot;</span><span class="p">);</span><span class="w"></span>
<span class="kd">const</span><span class="w"> </span><span class="nx">menu</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">builder</span><span class="p">.</span><span class="nx">get_object</span><span class="p">(</span><span class="s2">&quot;menu&quot;</span><span class="p">);</span><span class="w"></span>
</pre></div>
</div>
</div><div aria-labelledby="tab-1-VmFsYQ==" class="sphinx-tabs-panel code-tab group-tab" hidden="true" id="panel-1-VmFsYQ==" name="VmFsYQ==" role="tabpanel" tabindex="0"><div class="highlight-vala notranslate"><div class="highlight"><pre><span></span><span class="kd">var</span><span class="w"> </span><span class="n">builder</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">new</span><span class="w"> </span><span class="n">Gtk</span><span class="p">.</span><span class="n">Builder</span><span class="p">.</span><span class="n">from_resource</span><span class="w"> </span><span class="p">(</span><span class="s">&quot;/my/favourite/spells/menu.ui&quot;</span><span class="p">);</span><span class="w"></span>
<span class="n">Menu</span><span class="w"> </span><span class="n">menu</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">builder</span><span class="p">.</span><span class="n">get_object</span><span class="w"> </span><span class="p">(</span><span class="s">&quot;menu&quot;</span><span class="p">);</span><span class="w"></span>
</pre></div>
</div>
</div></div>
<section id="primary-menus">
<h2>Primary menus<a class="headerlink" href="#primary-menus" title="Permalink to this headline">#</a></h2>
<p>A common pattern in modern user interfaces is to place a button, often with a
gears icon, in some prominent place (top-right), which will open a menu when
clicked. GTK comes with the :doc`GtkMenuButton &lt;/tutorials/beginners/menu_button&gt;`
for this use case:</p>
<div class="sphinx-tabs docutils container">
<div aria-label="Tabbed content" class="closeable" role="tablist"><button aria-controls="panel-2-Qw==" aria-selected="true" class="sphinx-tabs-tab code-tab group-tab" id="tab-2-Qw==" name="Qw==" role="tab" tabindex="0">C</button><button aria-controls="panel-2-UHl0aG9u" aria-selected="false" class="sphinx-tabs-tab code-tab group-tab" id="tab-2-UHl0aG9u" name="UHl0aG9u" role="tab" tabindex="-1">Python</button><button aria-controls="panel-2-SmF2YVNjcmlwdA==" aria-selected="false" class="sphinx-tabs-tab code-tab group-tab" id="tab-2-SmF2YVNjcmlwdA==" name="SmF2YVNjcmlwdA==" role="tab" tabindex="-1">JavaScript</button><button aria-controls="panel-2-VmFsYQ==" aria-selected="false" class="sphinx-tabs-tab code-tab group-tab" id="tab-2-VmFsYQ==" name="VmFsYQ==" role="tab" tabindex="-1">Vala</button></div><div aria-labelledby="tab-2-Qw==" class="sphinx-tabs-panel code-tab group-tab" id="panel-2-Qw==" name="Qw==" role="tabpanel" tabindex="0"><div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="n">GtkBuilder</span><span class="w"> </span><span class="o">*</span><span class="n">builder</span><span class="w"> </span><span class="o">=</span><span class="w"></span>
<span class="w"> </span><span class="n">gtk_builder_new_from_resource</span><span class="w"> </span><span class="p">(</span><span class="s">&quot;/my/favourite/spells/potions.ui&quot;</span><span class="p">);</span><span class="w"></span>
<span class="n">GMenu</span><span class="w"> </span><span class="o">*</span><span class="n">menu</span><span class="w"> </span><span class="o">=</span><span class="w"></span>
<span class="w"> </span><span class="n">G_MENU_MODEL</span><span class="w"> </span><span class="p">(</span><span class="n">gtk_builder_get_object</span><span class="w"> </span><span class="p">(</span><span class="n">builder</span><span class="p">,</span><span class="w"> </span><span class="s">&quot;menu&quot;</span><span class="p">));</span><span class="w"></span>
<span class="c1">// &quot;menu_button&quot; is defined elsewhere</span>
<span class="n">gtk_menu_button_set_menu_model</span><span class="w"> </span><span class="p">(</span><span class="n">GTK_MENU_BUTTON</span><span class="w"> </span><span class="p">(</span><span class="n">menu_button</span><span class="p">),</span><span class="w"> </span><span class="n">menu</span><span class="p">);</span><span class="w"></span>
<span class="n">gtk_menu_button_set_primary</span><span class="w"> </span><span class="p">(</span><span class="n">GTK_MENU_BUTTON</span><span class="w"> </span><span class="p">(</span><span class="n">menu_button</span><span class="p">),</span><span class="w"> </span><span class="n">TRUE</span><span class="p">);</span><span class="w"></span>
<span class="n">g_object_unref</span><span class="w"> </span><span class="p">(</span><span class="n">builder</span><span class="p">);</span><span class="w"></span>
</pre></div>
</div>
</div><div aria-labelledby="tab-2-UHl0aG9u" class="sphinx-tabs-panel code-tab group-tab" hidden="true" id="panel-2-UHl0aG9u" name="UHl0aG9u" role="tabpanel" tabindex="0"><div class="highlight-python notranslate"><div class="highlight"><pre><span></span><span class="n">builder</span> <span class="o">=</span> <span class="n">Gtk</span><span class="o">.</span><span class="n">Builder</span><span class="o">.</span><span class="n">new_from_resource</span><span class="p">(</span><span class="s2">&quot;/my/favourite/spells/potions.ui&quot;</span><span class="p">)</span>
<span class="n">menu</span> <span class="o">=</span> <span class="n">builder</span><span class="o">.</span><span class="n">get_object</span><span class="p">(</span><span class="s2">&quot;menu&quot;</span><span class="p">)</span>
<span class="c1"># &quot;menu_button&quot; is defined elsewhere</span>
<span class="n">menu_button</span><span class="o">.</span><span class="n">set_menu_model</span><span class="p">(</span><span class="n">menu</span><span class="p">)</span>
<span class="n">menu_button</span><span class="o">.</span><span class="n">set_primary</span><span class="p">(</span><span class="kc">True</span><span class="p">)</span>
</pre></div>
</div>
</div><div aria-labelledby="tab-2-SmF2YVNjcmlwdA==" class="sphinx-tabs-panel code-tab group-tab" hidden="true" id="panel-2-SmF2YVNjcmlwdA==" name="SmF2YVNjcmlwdA==" role="tabpanel" tabindex="0"><div class="highlight-js notranslate"><div class="highlight"><pre><span></span><span class="kd">const</span><span class="w"> </span><span class="nx">builder</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Gtk</span><span class="p">.</span><span class="nx">Builder</span><span class="p">.</span><span class="nx">new_from_resource</span><span class="p">(</span><span class="s2">&quot;/my/favourite/spells/potions.ui&quot;</span><span class="p">);</span><span class="w"></span>
<span class="kd">const</span><span class="w"> </span><span class="nx">menu</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">builder</span><span class="p">.</span><span class="nx">get_object</span><span class="p">(</span><span class="s2">&quot;menu&quot;</span><span class="p">);</span><span class="w"></span>
<span class="c1">// &quot;menu_button&quot; is defined elsewhere</span><span class="w"></span>
<span class="nx">menu_button</span><span class="p">.</span><span class="nx">set_menu_model</span><span class="p">(</span><span class="nx">menu</span><span class="p">);</span><span class="w"></span>
<span class="nx">menu_button</span><span class="p">.</span><span class="nx">set_primary</span><span class="p">(</span><span class="kc">true</span><span class="p">);</span><span class="w"></span>
</pre></div>
</div>
</div><div aria-labelledby="tab-2-VmFsYQ==" class="sphinx-tabs-panel code-tab group-tab" hidden="true" id="panel-2-VmFsYQ==" name="VmFsYQ==" role="tabpanel" tabindex="0"><div class="highlight-vala notranslate"><div class="highlight"><pre><span></span><span class="kd">var</span><span class="w"> </span><span class="n">builder</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">new</span><span class="w"> </span><span class="n">Gtk</span><span class="p">.</span><span class="n">Builder</span><span class="p">.</span><span class="n">from_resource</span><span class="w"> </span><span class="p">(</span><span class="s">&quot;/my/favourite/spells/menu.ui&quot;</span><span class="p">);</span><span class="w"></span>
<span class="n">Menu</span><span class="w"> </span><span class="n">menu</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">builder</span><span class="p">.</span><span class="n">get_object</span><span class="w"> </span><span class="p">(</span><span class="s">&quot;menu&quot;</span><span class="p">);</span><span class="w"></span>
<span class="c1">// &quot;menu_button&quot; is defined elsewhere</span>
<span class="n">menu_button</span><span class="p">.</span><span class="n">menu_model</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">menu</span><span class="p">;</span><span class="w"></span>
<span class="n">menu_button</span><span class="p">.</span><span class="n">primary</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">true</span><span class="p">;</span><span class="w"></span>
</pre></div>
</div>
</div></div>
</section>
<section id="menu-bars">
<h2>Menu bars<a class="headerlink" href="#menu-bars" title="Permalink to this headline">#</a></h2>
<p>While uncommon in GNOME applications, it is still possible to create menu bars
by using <a class="reference external" href="https://docs.gtk.org/gtk4/class.PopoverMenuBar.html">GtkPopoverMenuBar</a>.</p>
</section>
<section id="context-menus">
<h2>Context menus<a class="headerlink" href="#context-menus" title="Permalink to this headline">#</a></h2>
<p>It is possible to create a ‘freestanding’ menu from a menu model, using
<code class="docutils literal notranslate"><span class="pre">gtk_popover_menu_new_from_model()</span></code>. This menu can then be used as a context
menu on any widget. The actions you refer to in such a menu can come from the
application or window scopes. You can also introduce a more localized scope,
using <code class="docutils literal notranslate"><span class="pre">gtk_widget_insert_action_group()</span></code>. The actions from such a local scope
can be used in any menu that is attached below this local scope.</p>
</section>
<section id="icons">
<h2>Icons<a class="headerlink" href="#icons" title="Permalink to this headline">#</a></h2>
<p>In order to add an icon to a menu item, you must specify the <code class="docutils literal notranslate"><span class="pre">icon</span></code> attribute
on the items in your menu model; when the menu is constructed, the icon will be
properly placed in the UI. The expected value for this attribute is a serialized
GIcon. Luckily, the GIcon serialization format is convenient for this use—for
instance:</p>
<div class="highlight-xml notranslate"><div class="highlight"><pre><span></span><span class="nt">&lt;attribute</span> <span class="na">name=</span><span class="s">&quot;icon&quot;</span><span class="nt">&gt;</span>/path/to/my/icon.png<span class="nt">&lt;/attribute&gt;</span>
</pre></div>
</div>
<p>is a valid serialization for a <a class="reference external" href="https://docs.gtk.org/gio/class.FileIcon.html">GFileIcon</a>
for the file at the given path, and:</p>
<div class="highlight-xml notranslate"><div class="highlight"><pre><span></span><span class="nt">&lt;attribute</span> <span class="na">name=</span><span class="s">&quot;icon&quot;</span><span class="nt">&gt;</span>preferences-desktop-locale-symbolic<span class="nt">&lt;/attribute&gt;</span>
</pre></div>
</div>
<p>is a valid serialization for a <a class="reference external" href="https://docs.gtk.org/gio/class.ThemedIcon.html">GThemedIcon</a>
for the <code class="docutils literal notranslate"><span class="pre">preferences-desktop-locale-symbolic</span></code> symbolic icon.</p>
</section>
</section>
</article>
<footer>
<div class="related-pages">
<a class="next-page" href="search-provider.html">
<div class="page-info">
<div class="context">
<span>Next</span>
</div>
<div class="title">Writing a Search Provider</div>
</div>
<svg><use href="#svg-arrow-right"></use></svg>
</a>
<a class="prev-page" href="actions.html">
<svg><use href="#svg-arrow-right"></use></svg>
<div class="page-info">
<div class="context">
<span>Previous</span>
</div>
<div class="title">Actions</div>
</div>
</a>
</div>
</footer>
</div>
<aside class="toc-drawer">
<div class="toc-sticky toc-scroll">
<div class="toc-title-container">
<span class="toc-title">
Contents
</span>
</div>
<div class="toc-tree-container">
<div class="toc-tree">
<ul>
<li><a class="reference internal" href="#">Menus</a><ul>
<li><a class="reference internal" href="#primary-menus">Primary menus</a></li>
<li><a class="reference internal" href="#menu-bars">Menu bars</a></li>
<li><a class="reference internal" href="#context-menus">Context menus</a></li>
<li><a class="reference internal" href="#icons">Icons</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</aside>
</main>
</div><script data-url_root="../" id="documentation_options" src="../_static/documentation_options.js"></script>
<script src="../_static/jquery.js"></script>
<script src="../_static/underscore.js"></script>
<script src="../_static/doctools.js"></script>
<script src="../_static/scripts/furo.js"></script>
<script src="../_static/tabs.js"></script>
</body>
</html>