gem-graph-client/docs/GTK-docs/gnome-dev-guidelines/developer.gnome.org/hig/patterns/controls/menus.html

366 lines
22 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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="Switches" href="switches.html" /><link rel="prev" title="Buttons" href="buttons.html" />
<meta name="generator" content="sphinx-4.3.0, furo 2021.07.05.beta38"/>
<title>Menus - GNOME Human Interface Guidelines documentation</title>
<link rel="stylesheet" type="text/css" href="../../_static/pygments.css" />
<link rel="stylesheet" type="text/css" href="../../_static/styles/furo.css" />
<link rel="stylesheet" type="text/css" href="../../_static/styles/furo-extensions.css" />
<link rel="stylesheet" type="text/css" href="../../_static/gnome.css" />
<style>
:root {
--color-code-background: #f8f8f8;
--color-code-foreground: black;
--color-brand-primary: #4a86cf;
--color-brand-content: #4a86cf;
}
@media (prefers-color-scheme: dark) {
:root {
--color-code-background: #202020;
--color-code-foreground: #d0d0d0;
}
}
/* For allowing end-user-specific overrides */
.override-light {
--color-code-background: #f8f8f8;
--color-code-foreground: black;
--color-brand-primary: #4a86cf;
--color-brand-content: #4a86cf;
}
.override-dark {
--color-code-background: #202020;
--color-code-foreground: #d0d0d0;
}
</style><link media="(prefers-color-scheme: dark)" rel="stylesheet" href="../../_static/pygments_dark.css"></head>
<body dir="">
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="svg-toc" viewBox="0 0 24 24">
<title>Contents</title>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke-width="1.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<line x1="4" y1="6" x2="20" y2="6" />
<line x1="10" y1="12" x2="20" y2="12" />
<line x1="6" y1="18" x2="20" y2="18" />
</svg>
</symbol>
<symbol id="svg-menu" viewBox="0 0 24 24">
<title>Menu</title>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="feather 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" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="feather feather-chevron-right">
<polyline points="9 18 15 12 9 6"></polyline>
</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 Human Interface Guidelines</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 centered" href="../../index.html">
<div class="sidebar-logo-container">
<img class="sidebar-logo" src="../../_static/logo.svg" alt="Logo"/>
</div>
<span class="sidebar-brand-text">GNOME Human Interface Guidelines</span>
</a><form class="sidebar-search-container" method="get" action="../../search.html">
<input class="sidebar-search" placeholder=Search name="q">
<input type="hidden" name="check_keywords" value="yes">
<input type="hidden" name="area" value="default">
</form><div class="sidebar-scroll"><div class="sidebar-tree">
<ul class="current">
<li class="toctree-l1"><a class="reference internal" href="../../principles.html">Design Principles</a></li>
<li class="toctree-l1"><a class="reference internal" href="../../resources.html">Tools &amp; Resources</a></li>
<li class="toctree-l1 has-children"><a class="reference internal" href="../../guidelines.html">Guidelines</a><input class="toctree-checkbox" id="toctree-checkbox-1" name="toctree-checkbox-1" type="checkbox"/><label for="toctree-checkbox-1"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/app-naming.html">App Naming</a></li>
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/app-icons.html">App Icons</a></li>
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/pointer-touch.html">Pointer &amp; Touch</a></li>
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/keyboard.html">Keyboard</a></li>
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/ui-icons.html">UI Icons</a></li>
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/ui-styling.html">UI Styling</a></li>
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/writing-style.html">Writing Style</a></li>
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/typography.html">Typography</a></li>
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/navigation.html">Navigation</a></li>
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/adaptive.html">Scaling &amp; Adaptiveness</a></li>
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/accessibility.html">Accessibility</a></li>
</ul>
</li>
<li class="toctree-l1 current has-children"><a class="reference internal" href="../../patterns.html">Patterns</a><input checked="" class="toctree-checkbox" id="toctree-checkbox-2" name="toctree-checkbox-2" type="checkbox"/><label for="toctree-checkbox-2"><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="../containers.html">Containers</a><input class="toctree-checkbox" id="toctree-checkbox-3" name="toctree-checkbox-3" type="checkbox"/><label for="toctree-checkbox-3"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
<li class="toctree-l3"><a class="reference internal" href="../containers/windows.html">Windows</a></li>
<li class="toctree-l3"><a class="reference internal" href="../containers/header-bars.html">Header Bars</a></li>
<li class="toctree-l3"><a class="reference internal" href="../containers/popovers.html">Popovers</a></li>
<li class="toctree-l3"><a class="reference internal" href="../containers/utility-panes.html">Utility Panes</a></li>
<li class="toctree-l3"><a class="reference internal" href="../containers/boxed-lists.html">Boxed Lists</a></li>
<li class="toctree-l3"><a class="reference internal" href="../containers/grid-views.html">Grid Views</a></li>
<li class="toctree-l3"><a class="reference internal" href="../containers/list-column-views.html">List &amp; Column Views</a></li>
<li class="toctree-l3"><a class="reference internal" href="../containers/selection-mode.html">Selection &amp; Edit Modes</a></li>
</ul>
</li>
<li class="toctree-l2 has-children"><a class="reference internal" href="../nav.html">Navigation</a><input class="toctree-checkbox" id="toctree-checkbox-4" name="toctree-checkbox-4" type="checkbox"/><label for="toctree-checkbox-4"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
<li class="toctree-l3"><a class="reference internal" href="../nav/browsing.html">Browsing</a></li>
<li class="toctree-l3"><a class="reference internal" href="../nav/view-switchers.html">View Switchers</a></li>
<li class="toctree-l3"><a class="reference internal" href="../nav/tabs.html">Tabs</a></li>
<li class="toctree-l3"><a class="reference internal" href="../nav/sidebars.html">Sidebars</a></li>
<li class="toctree-l3"><a class="reference internal" href="../nav/search.html">Search</a></li>
</ul>
</li>
<li class="toctree-l2 current has-children"><a class="reference internal" href="../controls.html">Controls</a><input checked="" class="toctree-checkbox" id="toctree-checkbox-5" name="toctree-checkbox-5" type="checkbox"/><label for="toctree-checkbox-5"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul class="current">
<li class="toctree-l3"><a class="reference internal" href="buttons.html">Buttons</a></li>
<li class="toctree-l3 current current-page"><a class="current reference internal" href="#">Menus</a></li>
<li class="toctree-l3"><a class="reference internal" href="switches.html">Switches</a></li>
<li class="toctree-l3"><a class="reference internal" href="text-fields.html">Text Fields</a></li>
<li class="toctree-l3"><a class="reference internal" href="checkboxes.html">Checkboxes</a></li>
<li class="toctree-l3"><a class="reference internal" href="radio-buttons.html">Radio Buttons</a></li>
<li class="toctree-l3"><a class="reference internal" href="drop-downs.html">Drop-Down Lists</a></li>
<li class="toctree-l3"><a class="reference internal" href="sliders.html">Sliders</a></li>
<li class="toctree-l3"><a class="reference internal" href="spin-buttons.html">Spin Buttons</a></li>
<li class="toctree-l3"><a class="reference internal" href="overlaid.html">Overlaid Controls</a></li>
</ul>
</li>
<li class="toctree-l2 has-children"><a class="reference internal" href="../feedback.html">Feedback</a><input class="toctree-checkbox" id="toctree-checkbox-6" name="toctree-checkbox-6" type="checkbox"/><label for="toctree-checkbox-6"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
<li class="toctree-l3"><a class="reference internal" href="../feedback/notifications.html">Notifications</a></li>
<li class="toctree-l3"><a class="reference internal" href="../feedback/toasts.html">Toasts</a></li>
<li class="toctree-l3"><a class="reference internal" href="../feedback/info-bars.html">Info Bars</a></li>
<li class="toctree-l3"><a class="reference internal" href="../feedback/progress-bars.html">Progress Bars</a></li>
<li class="toctree-l3"><a class="reference internal" href="../feedback/spinners.html">Spinners</a></li>
<li class="toctree-l3"><a class="reference internal" href="../feedback/dialogs.html">Dialogs</a></li>
<li class="toctree-l3"><a class="reference internal" href="../feedback/placeholders.html">Placeholder Pages</a></li>
<li class="toctree-l3"><a class="reference internal" href="../feedback/tooltips.html">Tooltips</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1 has-children"><a class="reference internal" href="../../reference.html">Reference</a><input class="toctree-checkbox" id="toctree-checkbox-7" name="toctree-checkbox-7" type="checkbox"/><label for="toctree-checkbox-7"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
<li class="toctree-l2"><a class="reference internal" href="../../reference/keyboard.html">Standard Keyboard Shortcuts</a></li>
<li class="toctree-l2"><a class="reference internal" href="../../reference/palette.html">Palette</a></li>
<li class="toctree-l2"><a class="reference internal" href="../../reference/backgrounds.html">Backgrounds</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>
<img alt="../../_images/popover-menu-list.png" class="light" src="../../_images/popover-menu-list.png"/>
<img alt="../../_images/popover-menu-list-dark.png" class="dark" src="../../_images/popover-menu-list-dark.png"/>
<p>Menus are a common design pattern. In GNOME they typically appear as primary, secondary and context menus.</p>
<section id="general-guidelines">
<h2>General Guidelines<a class="headerlink" href="#general-guidelines" title="Permalink to this headline"></a></h2>
<p>The following guidelines apply to all menus.</p>
<section id="menu-items">
<h3>Menu Items<a class="headerlink" href="#menu-items" title="Permalink to this headline"></a></h3>
<ul class="simple">
<li><p>Label menu items with verbs for commands and adjectives for settings, using <a class="reference internal" href="../../guidelines/writing-style.html#header-capitalization"><span class="std std-ref">header capitalization</span></a>.</p></li>
<li><p>Menu items can include <a class="reference internal" href="checkboxes.html"><span class="doc">checkboxes</span></a> and <a class="reference internal" href="radio-buttons.html"><span class="doc">radio buttons</span></a>.</p></li>
<li><p>Two linked actions can be combined into a single menu item, by changing the label when the item is selected. For example, a <em>Play</em> item may change to <em>Pause</em>. However, only use this type of item when actions are logical opposites which are obvious to users. Likewise, do not use this technique for settings — use check boxes or radio buttons instead.</p></li>
<li><p>Provide an <a class="reference internal" href="../../guidelines/keyboard.html#access-keys"><span class="std std-ref">access key</span></a> for every menu item. You may use the same access key on different menus in your application, but avoid duplicating access keys on the same menu.</p></li>
</ul>
</section>
<section id="menu-size-structure">
<span id="menu-organization"></span><h3>Menu Size &amp; Structure<a class="headerlink" href="#menu-size-structure" title="Permalink to this headline"></a></h3>
<ul class="simple">
<li><p>Menus should contain between three and twelve items, and submenus should contain between three and six items.</p></li>
<li><p>Order items logically, either by importance, task order, or expected frequency of use. Items at the top and bottom of the menu are more noticeable and easily targeted, so reserve these locations for particularly important or interesting functionality.</p></li>
<li><dl class="simple">
<dt>Organize similar menu items into groups — this will make them easier to understand and quicker to use. When creating groups:</dt><dd><ul>
<li><p>Place single-item groups at the top or bottom of the menu, or group them together with other single items.</p></li>
<li><p>Do not mix different types of menu item within each group — actions, check box and radio button items should be kept separate.</p></li>
</ul>
</dd>
</dl>
</li>
<li><p>Dont nest submenus, since nesting can be difficult to use ergonomically, as well as being hard to navigate.</p></li>
</ul>
</section>
</section>
<section id="primary-menus">
<span id="id1"></span><h2>Primary Menus<a class="headerlink" href="#primary-menus" title="Permalink to this headline"></a></h2>
<p>Most applications have primary menus, and they are the location for standard features which every application is expected to have.</p>
<ul class="simple">
<li><p>The button for primary menus should use the <code class="docutils literal notranslate"><span class="pre">open-menu-symbolic</span></code> icon.</p></li>
<li><dl class="simple">
<dt>Primary menus are typically placed at the end (in Western locales on the right) of the header bar. Although, there are two exceptions to this rule:</dt><dd><ul>
<li><p>If the window incorporates <a class="reference internal" href="../../guidelines/navigation.html"><span class="doc">hierarchical navigation</span></a>, the primary menu should only be visible while on the top level view. (If other views require a menu, a secondary menu can be used.)</p></li>
<li><p>If the window has a <a class="reference internal" href="../nav/sidebars.html"><span class="doc">sidebar</span></a>, the primary menu should be placed above the sidebar list.</p></li>
</ul>
</dd>
</dl>
</li>
</ul>
<section id="standard-primary-menu-items">
<h3>Standard Primary Menu Items<a class="headerlink" href="#standard-primary-menu-items" title="Permalink to this headline"></a></h3>
<p>The following are standard primary menu items, and should be placed in a group at the end of the menu:</p>
<div class="table-wrapper"><table class="colwidths-given docutils align-default">
<colgroup>
<col style="width: 20%"/>
<col style="width: 80%"/>
</colgroup>
<tbody>
<tr class="row-odd"><td><p>Preferences</p></td>
<td><p>Opens the applications preferences dialog, if it has one.</p></td>
</tr>
<tr class="row-even"><td><p>Keyboard Shortcuts</p></td>
<td><p>Opens the applications keyboard shortcuts window, if it has one.</p></td>
</tr>
<tr class="row-odd"><td><p>Help</p></td>
<td><p>Opens the applications user documentation in the Help application.</p></td>
</tr>
<tr class="row-even"><td><p>About Application</p></td>
<td><p>Opens the applications about dialog. This item should include the applications name, such as About Photos or About Calculator. Every primary menu should include this item.</p></td>
</tr>
</tbody>
</table></div>
<p>Primary menus shouldnt include menu items for <em>Close</em> or <em>Quit</em>: windows can already be closed using the close button in the header bar, and it isnt always obvious what a close menu item refers to.</p>
</section>
</section>
<section id="secondary-menus">
<span id="id2"></span><h2>Secondary Menus<a class="headerlink" href="#secondary-menus" title="Permalink to this headline"></a></h2>
<p>Secondary menus are located in the header bar, and are used to contain actions and settings for a particular view or content item (such as a document, contact, conversation or photo). This differentiates them from primary menus, whose menu items relate to the entire application.</p>
<p>Secondary menus:</p>
<ul class="simple">
<li><p>are typically used in combination with <a class="reference internal" href="../../guidelines/navigation.html"><span class="doc">hierarchical navigation</span></a> and <a class="reference internal" href="../nav/sidebars.html"><span class="doc">sidebars</span></a>;</p></li>
<li><p>are optional and only need to be used if there are enough actions or options to require a menu;</p></li>
<li><p>generally shouldnt reproduce menu items that are included in primary menus, like <em>Preferences</em> and <em>About</em>.</p></li>
</ul>
</section>
<section id="api-reference">
<h2>API Reference<a class="headerlink" href="#api-reference" title="Permalink to this headline"></a></h2>
<ul class="simple">
<li><p><a class="reference external" href="https://docs.gtk.org/gtk4/class.MenuButton.html">GTK 4: GtkMenuButton</a></p></li>
<li><p><a class="reference external" href="https://docs.gtk.org/gtk3/class.MenuButton.html">GTK 3: GtkMenuButton</a></p></li>
<li><p><a class="reference external" href="https://docs.gtk.org/gtk4/class.PopoverMenu.html">GTK 4: GtkPopoverMenu</a></p></li>
<li><p><a class="reference external" href="https://docs.gtk.org/gtk3/class.PopoverMenu.html">GTK 3: GtkPopoverMenu</a></p></li>
</ul>
</section>
</section>
</article>
<footer>
<div class="related-pages">
<a class="next-page" href="switches.html">
<div class="page-info">
<div class="context">
<span>Next</span>
</div>
<div class="title">Switches</div>
</div>
<svg><use href="#svg-arrow-right"></use></svg>
</a>
<a class="prev-page" href="buttons.html">
<svg><use href="#svg-arrow-right"></use></svg>
<div class="page-info">
<div class="context">
<span>Previous</span>
</div>
<div class="title">Buttons</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="#general-guidelines">General Guidelines</a><ul>
<li><a class="reference internal" href="#menu-items">Menu Items</a></li>
<li><a class="reference internal" href="#menu-size-structure">Menu Size &amp; Structure</a></li>
</ul>
</li>
<li><a class="reference internal" href="#primary-menus">Primary Menus</a><ul>
<li><a class="reference internal" href="#standard-primary-menu-items">Standard Primary Menu Items</a></li>
</ul>
</li>
<li><a class="reference internal" href="#secondary-menus">Secondary Menus</a></li>
<li><a class="reference internal" href="#api-reference">API Reference</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/main.js"></script>
</body>
</html>