Skip to main content

Tabs Panel

The Tabs panel allows you to create multiple tabbed items of content featuring highlighted, horizontally-displayed tab headers.

Tabs Panel Guidelines

  • Use tabs to alternate between views within the same context.
  • Label tabs logically so that users can easily predict what they’ll find when they select a tab.
  • Use tabs only when users don’t need to see content from multiple tabs at the same time.
  • If headings and text can do the job, don’t use tabs.
  • Keep content and layouts within tabs simple and scannable.
  • Tabs should not be used as navigation.
  • Use of this panel for an undocumented purpose or in a non-standard way is discouraged and may not be supported.
  • Review the Recommendations for Accessible Panels page to learn more about requirements for headings, images, links, and media published in this panel.

How to Configure the Tabs Panel

  • In the WordPress editor, select Add a New Panel or Live Preview.
  • Select the “Tabs” panel.
  • Title: This is a text field. Content entered here will appear as the panel’s primary title.
  • Tabs: Add your tabs here. If there are more tabs in the panel than will fit horizontally on a display, the tabs will conveniently scroll. However, the design works best with no more than four or five tabs.
  • Title: The title is not displayed to the user, but is helpful for labeling the tab in the panel so a page author or administrator can easily understand the content at a glance.
  • Tab Label: This is label (or “tab header”) that will be used for the tab on the screen. Keep this short for design purposes (so small portrait-oriented screens, such as a smartphone, can display more than one tab label at a time).
  • Content Columns: We recommend restating the tab label at the beginning of the content as a heading level 3. This provides some additional structure on the page for users.  Additionally, each tabbed item can have up to three columns of content within it. A default of one content column is present when panel is created. Keep in mind that multiple columns of content may not display well on a mobile device held in portrait mode.


Custom Language: The default language is English. Language options that will generate markup signifying that content as being in the selected language.

Example Tabs Panel