Tab Views

A tab view presents multiple mutually exclusive panes of content in the same area. A tab view includes a tabbed control (which is similar in appearance to a segmented control) and a content area. Each segment of a tabbed control is known as a tab, and clicking a tab displays its corresponding pane in the content area. Although the amount of content can vary from pane to pane, switching tabs doesn’t change the overall size of the tab view or its parent window.

Screenshot of the Sound preference pane, which uses tab views for accessing controls to configure Sound Effects, as well as sound Output and Input.

You can position the tabbed control on any side of the content area—top, bottom, left, or right. You can also hide the controls, which is appropriate when you switch the panes programmatically.

Illustration of a window in which a three-tab tabbed control is centered on the top edge of the content view.

Top tabs

Illustration of a window in which a three-tab tabbed control is centered on the bottom edge of the content view.

Bottom tabs

Illustration of a window in which a three-tab tabbed control is centered on the left edge of the content view.

Left tabs

Illustration of a window in which a three-tab tabbed control is centered on the right edge of the content view.

Right tabs

When you hide the tabbed control, the content area can be borderless, bezeled, or bordered with a line. A borderless view can be solid or transparent.

Illustration of a window in which the content area of the tabless tab view has no border or bezel.

Tabless

Illustration of a window in which the content area of the tabless tab view has a bezel.

Tabless bezeled

Illustration of a window in which the content area of the tabless tab view has a border.

Tabless bordered

Use a tab view to present closely related peer areas of content. The typical appearance of a tab view provides a strong visual indication of enclosure. People expect each tab to display content that is in some way similar or related to the content in the other tabs.

Provide between two and six tabs in a tab view. Having more than six tabs can be overwhelming and create layout issues. If you have six or more tabs, consider another way to implement your app’s user interface. For example, you may find that the tabs would be better suited as icons in a toolbar.

Make sure the controls within a pane only affect content in the same pane. Panes are mutually exclusive and should be fully self-contained.

In general, inset a tab view by leaving a margin of window-body area on all sides of a tab view. This layout looks clean and leaves room for additional controls that can affect the window itself (or other tabs). For example, the lock button in Date & Time preferences is outside of the tab view because it applies to all tabs. It is possible to extend a tab view to meet the window edges, but this layout is unusual.

Provide a label for each tab that describes the contents of its pane. A good label helps the user predict the contents of a pane before clicking its tab. In general, use nouns or very short noun phrases for tab labels. A verb or short verb phrase may make sense in some contexts. Tab labels should use title-style capitalization.

Avoid using a pop-up button as a tab-switcher. A tab view is efficient because it requires a single click to make a selection, while a pop-up button requires two. A tab view also presents all choices onscreen at once, while a pop-up button must be clicked to see its choices.

For developer guidance, see NSTabView.