Skip to main content

Tabs

Tabs are used to quickly navigate between views within the same context.

Tabs example

Overview

Tabs are a set of layered sections of content, known as tab panels, that display one panel of content at a time. Each tab panel has an associated tab element, that when activated, displays the panel. The list of tab elements is arranged along one edge of the currently displayed panel, most commonly horizontally, at the top edge. When a tabbed interface is initialized, one tab panel is always displayed.

Usage

Use when

  • You want to quickly switch between sibling views underneath a larger organizing principle/context.
  • You want to organize content into meaningful sections that occupy less screen space.
  • Add visual consistency.

Donít use when

  • You need primary means of navigation.
  • Grouping unrelated content.
  • You want to organize content that needs to be seen by the user at the same time.
  • You want to hide primary user action element.
  • You want to hide critical content.
What's changed
Date Version Notes Contributors
06/01/2022 1.0.1 Updated full layout. M. Johns