This is a proposal on how tabs in the headerbar could be implemented and used. The most important benefits of this implementation, and the use of tabs in the headerbar in general, is:

  1. Better overview and faster navigation of an app's structure. Although breadcrumbs (which aren't really tabs) stands for much of the work in this respect.
  2. A simple solution for project-based apps. The concept of a tab and the concept of a project comes closer to each other. Creating a project is the same as opening a tab, and vice versa.
  3. Saves space.
  4. Allows for more flexibility in managing windows.

Controlling tabs

  • Scrolling on the headerbar - switching tabs
  • Middle mouse button - close tab
  • Left mouse button - select tab in unselected, if selected, opens the tab-menu
  • Right mouse button - opens tab-menu
  • Left mouse button dragging - moves the window
  • Right mouse button dragging - moves the tab

The tab-menu

The tab-menu is a popover that opens when you click on an already selected tab or right click it. It contains basic items such as close and save, but can contain almost anything. In the case of gnome web, the popover needs some styling.

Discrete tabs

Discrete tabs are for apps that are not focused on being able to use tabs. The tab-behavior only kicks in when two tabs are open, but if only one "tab" is open in that window, it will only show as a normal title.

Discrete tabs


Discrete tabs with breadcrumbs


Discrete tabs with overview-tab and breadcrumbs


Static tabs

Static tabs are tabs that are, well, static.

Static tabs


Static tabs with breadcrumbs


Dynamic tabs

Dynamic tabs are meant for project-based apps, for example gimp, libreoffice writer and so on.

Dynamic tabs



Design/Playground/Headertabs (last edited 2014-05-21 13:23:00 by Albert)