Tabs

Tabs provide a way to break down a window into a series of views. They come in two primary forms: fixed and dynamic. Fixed tabs provide an immutable set of defined views that are built into a user interface, primarily dialog windows. Dynamic tabs allow a user to view multiple documents or locations within an application's primary window.

When to use

Use fixed tabs when a dialog contains too many controls (or too much information) to comfortably present them at the same time.

Dynamic tabs are primarily useful for browser or editor applications, where a user might want to use several locations or content items simulatenously.

Fixed tabs

  • Do not use too many tabs. If you cannot see all the tabs without scrolling or splitting them into multiple rows, you are probably using too many and should use a list control instead.

  • Label tabs with header capitalization, and use nouns rather than verbs, for example Font or Alignment. Try to give tab labels a similar length.

  • Do not design tabs such that changing controls on one page affects the controls on any other page. Users are unlikely to discover such dependencies.

  • If a control affects every tab, place it outside the tabs.

  • Use tabs that are proportional to the width of their labels. Don't just set all the tabs to the same width, as this makes them harder to scan visually, and limits the number of tabs you can display without scrolling.

Dynamic tabs

  • Tabs often have a constrained width, so ensure that tab labels are short and concise, and that the most useful part of the label is displayed first. This ensures that the label continues to be useful even when ellipsized.

  • If the content of a tab changes or requires attention, a visual hint can be displayed.

  • Provide a context menu on each tab. This menu should only include actions for manipulating the tab itself, such as Move Left, Move Right, Move to New Window, and Close.

Full and partial integration

If tabs are an important part of the application, make the tab bar permanently visible, so that the first tab is visible when the application is launched. A new tab button can also be placed in the header bar or toolbar.

Dynamic tabs can also be used in cases where tabs will not always be used, or do not form a core part of the application's functionality. In these cases, tabs provide an additional extra function for those users who want to use them, without introducing superfluous controls for those who only view a single location or content item within each window.

In these cases, the tab bar should only be displayed when two or more tabs are open, and a new tab button should not be displayed in the header bar or toolbar. Keyboard shortcuts or menu items should be used to allow new tabs to be opened.