WordPress.org

TabPanel Edit

TabPanel is a React component to render an ARIA-compliant TabPanel.

TabPanels organize content across different screens, data sets, and interactions. It has two sections: a list of tabs, and the view to show when tabs are chosen.

The “Document” tab selected in the sidebar TabPanel.

Table of contents Table of contents

  1. Design guidelines
  2. Development guidelines

Top ↑

Design guidelines Design guidelines

Usage Usage

TabPanels organize and allow navigation between groups of content that are related and at the same level of hierarchy.

Tabs in a set Tabs in a set

As a set, all tabs are unified by a shared topic. For clarity, each tab should contain content that is distinct from all the other tabs in a set.

Top ↑

Anatomy Anatomy

  1. Container
  2. Active text label
  3. Active tab indicator
  4. Inactive text label
  5. Tab item

Top ↑

Labels Labels

Tab labels appear in a single row, in the same typeface and size. Use text labels that clearly and succinctly describe the content of a tab, and make sure that a set of tabs contains a cohesive group of items that share a common characteristic.

Tab labels can wrap to a second line, but do not add a second row of tabs.

Top ↑

Active tab indicators Active tab indicators

To differentiate an active tab from an inactive tab, apply an underline and color change to the active tab’s text and icon.

An underline and color change differentiate an active tab from the inactive ones.

Top ↑

Behavior Behavior

Users can navigate between tabs by tapping the tab key on the keyboard.

Top ↑

Placement Placement

Place tabs above content. Tabs control the UI region displayed below them.

Top ↑

Development guidelines Development guidelines

Usage Usage

import { TabPanel } from '@wordpress/components';

const onSelect = ( tabName ) => {
    console.log( 'Selecting tab', tabName );
};

const MyTabPanel = () => (
    <TabPanel className="my-tab-panel"
        activeClass="active-tab"
        onSelect={ onSelect }
        tabs={ [
            {
                name: 'tab1',
                title: 'Tab 1',
                className: 'tab-one',
            },
            {
                name: 'tab2',
                title: 'Tab 2',
                className: 'tab-two',
            },
        ] }>
        {
            ( tab ) => <p>{ tab.title }</p>
        }
    </TabPanel>
);

Top ↑

Props Props

The component accepts the following props:

Top ↑

className className

The class to give to the outer container for the TabPanel

  • Type: String
  • Required: No
  • Default: ”

Top ↑

orientation orientation

The orientation of the tablist (vertical or horizontal)

  • Type: String
  • Required: No
  • Default: horizontal

Top ↑

onSelect onSelect

The function called when a tab has been selected. It is passed the tabName as an argument.

  • Type: Function
  • Required: No
  • Default: noop

Top ↑

tabs tabs

A list of tabs where each tab is defined by an object with the following fields:

  1. name: String. Defines the key for the tab
  2. title: String. Defines the translated text for the tab
  3. className: String. Defines the class to put on the tab.

Other fields may be added to the object and accessed from the child function if desired.

  • Type: Array
  • Required: Yes

Top ↑

activeClass activeClass

The class to add to the active tab

  • Type: String
  • Required: No
  • Default: is-active

Top ↑

initialTabName initialTabName

Optionally provide a tab name for a tab to be selected upon mounting of component. If this prop is not set, the first tab will be selected by default.

  • Type: String
  • Required: No
  • Default: none

Top ↑

children children

A function which renders the tabviews given the selected tab. The function is passed the active tab object as an argument as defined the the tabs prop.
The element to which the tooltip should anchor.

  • Type: (Object) => Element
  • Required: Yes
Skip to toolbar