317 lines
20 KiB
HTML
317 lines
20 KiB
HTML
<!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="Popovers" href="popovers.html" /><link rel="prev" title="Windows" href="windows.html" />
|
||
|
||
<meta name="generator" content="sphinx-4.3.0, furo 2021.07.05.beta38"/>
|
||
<title>Header Bars - 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 & 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 & 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 & 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 current has-children"><a class="reference internal" href="../containers.html">Containers</a><input checked="" 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 class="current">
|
||
<li class="toctree-l3"><a class="reference internal" href="windows.html">Windows</a></li>
|
||
<li class="toctree-l3 current current-page"><a class="current reference internal" href="#">Header Bars</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="popovers.html">Popovers</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="utility-panes.html">Utility Panes</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="boxed-lists.html">Boxed Lists</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="grid-views.html">Grid Views</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="list-column-views.html">List & Column Views</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="selection-mode.html">Selection & 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 has-children"><a class="reference internal" href="../controls.html">Controls</a><input 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>
|
||
<li class="toctree-l3"><a class="reference internal" href="../controls/buttons.html">Buttons</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../controls/menus.html">Menus</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../controls/switches.html">Switches</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../controls/text-fields.html">Text Fields</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../controls/checkboxes.html">Checkboxes</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../controls/radio-buttons.html">Radio Buttons</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../controls/drop-downs.html">Drop-Down Lists</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../controls/sliders.html">Sliders</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../controls/spin-buttons.html">Spin Buttons</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../controls/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="header-bars">
|
||
<h1>Header Bars<a class="headerlink" href="#header-bars" title="Permalink to this headline">¶</a></h1>
|
||
<img alt="../../_images/header-bar.png" class="light" src="../../_images/header-bar.png"/>
|
||
<img alt="../../_images/header-bar-dark.png" class="dark" src="../../_images/header-bar-dark.png"/>
|
||
<p>Header bars are a standard element that span the top of windows. They allow windows to be dragged, are the site for window management features, and contain application controls.</p>
|
||
<p>Header bars often include:</p>
|
||
<ul class="simple">
|
||
<li><p><a class="reference internal" href="../controls/buttons.html"><span class="doc">Buttons</span></a> for the main user actions, such as <em>new</em>, <em>add</em>, <em>open</em> and <em>back</em>. These are placed at the start of the header bar (on the left in left-to-right locales).</p></li>
|
||
<li><p>A window heading, which is placed in the center (sometimes this is replaced with a <a class="reference internal" href="../nav/view-switchers.html"><span class="doc">view switcher</span></a>.)</p></li>
|
||
<li><p><a class="reference internal" href="../controls/menus.html"><span class="doc">Menus</span></a>, which are typically placed at the end.</p></li>
|
||
</ul>
|
||
<section id="guidelines">
|
||
<h2>Guidelines<a class="headerlink" href="#guidelines" title="Permalink to this headline">¶</a></h2>
|
||
<ul class="simple">
|
||
<li><p>Arrange controls within the header bar according to the three alignment points — left, center and right.</p></li>
|
||
<li><p>Header bars should only contain a small number of controls. This helps people to understand the primary functionality provided by the window, and ensures that the window can be resized to narrow widths.</p></li>
|
||
<li><p>The content of header bars can — and should — update along with view or mode changes, so that different controls are shown depending on the content of the window. This ensures that header bar controls are always relevant to the current context.</p></li>
|
||
<li><p>Always ensure that there is some blank space in the header bar to allow it to be dragged.</p></li>
|
||
<li><p>Primary window header bar controls should all have <a class="reference internal" href="../feedback/tooltips.html"><span class="doc">tooltips</span></a>.</p></li>
|
||
</ul>
|
||
</section>
|
||
<section id="button-style">
|
||
<span id="header-bar-buttons"></span><h2>Button Style<a class="headerlink" href="#button-style" title="Permalink to this headline">¶</a></h2>
|
||
<img alt="../../_images/header-bar-buttons.png" src="../../_images/header-bar-buttons.png"/>
|
||
<p>As far as possible, header bar buttons should appear without a visible background or border. This style is automatically applied to types of button where it is known to work effectively, including buttons with an icon only, buttons with an icon and label, and split buttons.</p>
|
||
<p>Types of buttons which don’t automatically have their appearance adjusted when in a header bar include buttons with:</p>
|
||
<ul class="simple">
|
||
<li><p>a text label only;</p></li>
|
||
<li><p><a class="reference internal" href="../controls/buttons.html#button-styles"><span class="std std-ref">the suggested and destructive action styles</span></a>;</p></li>
|
||
<li><p>the linked style.</p></li>
|
||
</ul>
|
||
<p>These button types should generally be avoided for primary window header bars, since it leads to a complex and inconsistent visual appearance. To achieve this, icons can be added to label-only buttons, and spacing can be used instead of the linked style (see below). Note that these guideline do not apply to <a class="reference internal" href="../feedback/dialogs.html#action-dialogs"><span class="std std-ref">action dialogs</span></a>, which can safely retain their label-only buttons.</p>
|
||
<p>For more information, see the <a class="reference external" href="https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/style-classes.html#toolbars">toolbar style class documentation</a>.</p>
|
||
<section id="button-grouping">
|
||
<h3>Button Grouping<a class="headerlink" href="#button-grouping" title="Permalink to this headline">¶</a></h3>
|
||
<p>Buttons can be grouped within a header bar, in order to communicate a functional relationship between them. This is most common with pairs of interconnected buttons, such as the back/forward buttons in a browser.</p>
|
||
<p>Button grouping can be acheived by adding spacing between sets of buttons. This can be implemented with separators which have the <a class="reference external" href="https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/style-classes.html#spacers">spacer style class</a>. Using spacing in this way is recommended as an alternative to using linked buttons, which don’t have their background removed when in a header bar.</p>
|
||
<p><a class="reference external" href="https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.SplitButton.html">Split buttons</a>, which incorporate a single button and connected dropdown, are another way to group buttons inside a header bar while ensuring a consistent appearance.</p>
|
||
</section>
|
||
</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://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.HeaderBar.html">Adwaita: AdwHeaderBar</a></p></li>
|
||
<li><p><a class="reference external" href="https://gnome.pages.gitlab.gnome.org/libhandy/doc/1-latest/class.HeaderBar.html">Handy: HdyHeaderBar</a></p></li>
|
||
<li><p><a class="reference external" href="https://docs.gtk.org/gtk4/class.HeaderBar.html">GTK 4: GtkHeaderBar</a></p></li>
|
||
<li><p><a class="reference external" href="https://docs.gtk.org/gtk3/class.HeaderBar.html">GTK 3: GtkHeaderBar</a></p></li>
|
||
</ul>
|
||
</section>
|
||
</section>
|
||
|
||
</article>
|
||
<footer>
|
||
|
||
<div class="related-pages">
|
||
<a class="next-page" href="popovers.html">
|
||
<div class="page-info">
|
||
<div class="context">
|
||
<span>Next</span>
|
||
</div>
|
||
<div class="title">Popovers</div>
|
||
</div>
|
||
<svg><use href="#svg-arrow-right"></use></svg>
|
||
</a>
|
||
<a class="prev-page" href="windows.html">
|
||
<svg><use href="#svg-arrow-right"></use></svg>
|
||
<div class="page-info">
|
||
<div class="context">
|
||
<span>Previous</span>
|
||
</div>
|
||
|
||
<div class="title">Windows</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="#">Header Bars</a><ul>
|
||
<li><a class="reference internal" href="#guidelines">Guidelines</a></li>
|
||
<li><a class="reference internal" href="#button-style">Button Style</a><ul>
|
||
<li><a class="reference internal" href="#button-grouping">Button Grouping</a></li>
|
||
</ul>
|
||
</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> |