Overview

Tabs are used to organize and navigate between sections of content. They feature a horizontal or a vertical list of section text labels with a content panel below or to the right of the component.

Horizontal tabs

Vertical tabs

Installation

npm install @patternfly/pfe-tabs

Usage

For each pfe-tab, you are responsible for setting the role="heading"and slot="tab".

For each pfe-tab-panel, you are responsible for setting role="region" and slot="panel".

Horizontal

<pfe-tabs>
  <pfe-tab role="heading" slot="tab">
    <h1>Tab 1</h1>
  </pfe-tab>
  <pfe-tab-panel role="region" slot="panel">
    <h2>Content 1</h2>
    <p>Tab 1 panel content.</p>
  </pfe-tab-panel>
  <pfe-tab role="heading" slot="tab">
    <h1>Tab 2</h1>
  </pfe-tab>
  <pfe-tab-panel role="region" slot="panel">
    <h2>Content 2</h2>
    <p>Tab 2 panel content.</p>
  </pfe-tab-panel>
</pfe-tabs>

Horizontal: centered

<pfe-tabs tab-align="center">
  <pfe-tab role="heading" slot="tab">
    <h1>Tab 1</h1>
  </pfe-tab>
  <pfe-tab-panel role="region" slot="panel">
    <h2>Content 1</h2>
    <p>Tab 1 panel content.</p>
  </pfe-tab-panel>
  <pfe-tab role="heading" slot="tab">
    <h1>Tab 2</h1>
  </pfe-tab>
  <pfe-tab-panel role="region" slot="panel">
    <h2>Content 2</h2>
    <p>Tab 2 panel content.</p>
  </pfe-tab-panel>
</pfe-tabs>

Horizontal: earth variant

<pfe-tabs variant="earth">
  <pfe-tab role="heading" slot="tab">
    <h1>Tab 1</h1>
  </pfe-tab>
  <pfe-tab-panel role="region" slot="panel">
    <h2>Content 1</h2>
    <p>Tab 1 panel content.</p>
  </pfe-tab-panel>
  <pfe-tab role="heading" slot="tab">
    <h1>Tab 2</h1>
  </pfe-tab>
  <pfe-tab-panel role="region" slot="panel">
    <h2>Content 2</h2>
    <p>Tab 2 panel content.</p>
  </pfe-tab-panel>
</pfe-tabs>

Vertical

<pfe-tabs vertical>
  <pfe-tab role="heading" slot="tab">
    <h1>Tab 1</h1>
  </pfe-tab>
  <pfe-tab-panel role="region" slot="panel">
    <h2>Content 1</h2>
    <p>Tab 1 panel content.</p>
  </pfe-tab-panel>
  <pfe-tab role="heading" slot="tab">
    <h1>Tab 2</h1>
  </pfe-tab>
  <pfe-tab-panel role="region" slot="panel">
    <h2>Content 2</h2>
    <p>Tab 2 panel content.</p>
  </pfe-tab-panel>
</pfe-tabs>

Vertical: earth variant

<pfe-tabs vertical variant="earth">
  <pfe-tab role="heading" slot="tab">
    <h1>Tab 1</h1>
  </pfe-tab>
  <pfe-tab-panel role="region" slot="panel">
    <h2>Content 1</h2>
    <p>Tab 1 panel content.</p>
  </pfe-tab-panel>
  <pfe-tab role="heading" slot="tab">
    <h1>Tab 2</h1>
  </pfe-tab>
  <pfe-tab-panel role="region" slot="panel">
    <h2>Content 2</h2>
    <p>Tab 2 panel content.</p>
  </pfe-tab-panel>
</pfe-tabs>

Slots

default: pfe-tabs

Place the pfe-tab and pfe-tab-panel elements here.

default: pfe-tab

Add the heading for your tab here.

default: pfe-tab-panel

Add the content for your tab panel here.

Attributes

variant (observed)

Values

• wind: Borders are removed, only an accent colored indicator appears under the active heading.
• earth: Headings are encased in a block. The active heading has an accent colored border on one side.

<pfe-tabs variant="wind">
  ...
</pfe-tabs>

vertical (observed)

Orients the tabs vertically on the left and pushes the content panes to the right.

<pfe-tabs vertical>
  ...
</pfe-tabs>

selected-index (observed)

Sets and reflects the currently selected tab index.

<pfe-tabs selected-index="2">
  ...
</pfe-tabs>

context (observed)

Changes the context of the call-to-action to one of 3 possible options:

• light (default)
• dark
• saturated

This will override any context being passed from a parent component and will add a style attribute setting the --context variable.

tab-history (observed)

Updates window.history and the URL to create sharable links. With the tab-history attribute, the tabs and each tab must have an id.

The URL pattern will be ?{id-of-tabs}={id-of-selected-tab}. In the example below, selecting "Tab 2" will update the URL as follows: ?my-tabs=tab2.

<pfe-tabs tab-history id="my-tabs">
  <pfe-tab role="heading" slot="tab" id="tab1">Tab 1</pfe-tab>
  <pfe-tab-panel role="region" slot="panel">
    <h2>Content 1</h2>
    <p>Tab 1 panel content.</p>
  </pfe-tab-panel>
  <pfe-tab role="heading" slot="tab" id="tab2">Tab 2</pfe-tab>
  <pfe-tab-panel role="region" slot="panel">
    <h2>Content 2</h2>
    <p>Tab 2 panel content.</p>
  </pfe-tab-panel>
</pfe-tabs>

Note: This feature is not supported in IE11.

Using the URL to open a specific tab

By default, pfe-tabs will read the URL and look for a query string parameter that matches the id of a pfe-tabs component and a value of a specific pfe-tab.

For example, ?my-tabs=tab2 would open the second tab in the code sample below. "my-tabs" is equal to the id of the pfe-tabs component and "tab2" is equal to the id of the second tab in the tab set.

<pfe-tabs id="my-tabs">
  <pfe-tab role="heading" slot="tab" id="tab1">Tab 1</pfe-tab>
  <pfe-tab-panel role="region" slot="panel">
    <h2>Content 1</h2>
    <p>Tab 1 panel content.</p>
  </pfe-tab-panel>
  <pfe-tab role="heading" slot="tab" id="tab2">Tab 2</pfe-tab>
  <pfe-tab-panel role="region" slot="panel">
    <h2>Content 2</h2>
    <p>Tab 2 panel content.</p>
  </pfe-tab-panel>
</pfe-tabs>

In the event that a tab with the supplied id in the URL does not exist, pfe-tabs will fall back to the selected-index attribute if one is supplied in the markup, or the first tab if selected-index is not provided.

Note: This feature is not supported in IE11.

Methods

None

Events

pfe-tabs:shown-tab

Fires when a new tab is selected. The event.detail.tab will be the tab that has been selected.

{
  detail: pfe-tab (DOM element)
}

pfe-tabs:hidden-tab

Fires when a selected tab is no longer the selected tab. The event.detail.tab will be the tab that is no longer selected.

{
  detail: pfe-tab (DOM element)
}

Styling hooks