- React
- HTML
- HTML demos

# Examples

## Default

### Default tabs example

### Default tabs usage

Class | Applied to | Outcome
--- | --- | ---
`.pf-m-disabled` | `a.pf-v6-c-tabs__link` | Modifies a tabs link for disabled styles.
`.pf-m-aria-disabled` | `.pf-v6-c-tabs__link` | Modifies a tabs link for disabled styles, but is still hoverable/focusable.

## Overflow

### Overflow beginning of list example

### Overflow beginning of list usage

Class | Applied to | Outcome
--- | --- | ---
`.pf-m-scrollable` | `.pf-v6-c-tabs` | Enables the directional scroll buttons.
`.pf-v6-c-tabs__scroll-button` | `<div>` | Initiates a tabs component scroll button container.

### Horizontal overflow example

### Horizontal overflow expanded example

### Horizontal overflow selected example

## Vertical

### Vertical tabs example

### Vertical expandable example

### Vertical expanded example

### Vertical expandable responsive example

### Vertical expandable example (deprecated)

    <div
      class="pf-v6-c-tabs pf-m-expandable pf-m-vertical"
      role="region"
      id="vertical-expandable-legacy"
    >
      <div class="pf-v6-c-tabs__toggle">
        <div class="pf-v6-c-tabs__toggle-button">
          <button
            class="pf-v6-c-button pf-m-plain"
            type="button"
            aria-label="Details"
            aria-expanded="true"
            id="vertical-expandable-legacy-toggle-button"
            aria-labelledby="vertical-expandable-legacy-toggle-text vertical-expandable-legacy-toggle-button"
          >
            <span class="pf-v6-c-button__icon">
              <span class="pf-v6-c-tabs__toggle-icon">
                <i class="fas fa-angle-right" aria-hidden="true"></i>
              </span>
            </span>
          </button>
        </div>
        <span
          class="pf-v6-c-tabs__toggle-text"
          id="vertical-expandable-legacy-toggle-text"
        >Containers</span>
      </div>

      <ul class="pf-v6-c-tabs__list" role="tablist">
        <li class="pf-v6-c-tabs__item" role="presentation">
          <button
            type="button"
            class="pf-v6-c-tabs__link"
            role="tab"
            id="vertical-expandable-legacy-users-link"
          >
            <span class="pf-v6-c-tabs__item-text">Users</span>
          </button>
        </li>
        <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
          <button
            type="button"
            class="pf-v6-c-tabs__link"
            role="tab"
            id="vertical-expandable-legacy-containers-link"
          >
            <span class="pf-v6-c-tabs__item-text">Containers</span>
          </button>
        </li>
        <li class="pf-v6-c-tabs__item" role="presentation">
          <button
            type="button"
            class="pf-v6-c-tabs__link"
            role="tab"
            id="vertical-expandable-legacy-database-link"
          >
            <span class="pf-v6-c-tabs__item-text">Database</span>
          </button>
        </li>

        <li class="pf-v6-c-tabs__item" role="presentation">
          <button
            type="button"
            class="pf-v6-c-tabs__link"
            role="tab"
            id="vertical-expandable-legacy-server-link"
          >
            <span class="pf-v6-c-tabs__item-text">Server</span>
          </button>
        </li>
        <li class="pf-v6-c-tabs__item" role="presentation">
          <button
            type="button"
            class="pf-v6-c-tabs__link"
            role="tab"
            id="vertical-expandable-legacy-system-link"
          >
            <span class="pf-v6-c-tabs__item-text">System</span>
          </button>
        </li>
        <li class="pf-v6-c-tabs__item" role="presentation">
          <button
            type="button"
            class="pf-v6-c-tabs__link"
            role="tab"
            id="vertical-expandable-legacy-network-wired-link"
          >
            <span class="pf-v6-c-tabs__item-text">Network</span>
          </button>
        </li>
      </ul>
    </div>

### Vertical expanded example (deprecated)

    <div
      class="pf-v6-c-tabs pf-m-expandable pf-m-expanded pf-m-vertical"
      role="region"
      id="vertical-expanded-legacy"
    >
      <div class="pf-v6-c-tabs__toggle">
        <div class="pf-v6-c-tabs__toggle-button">
          <button
            class="pf-v6-c-button pf-m-plain"
            type="button"
            aria-expanded="true"
            aria-label="Details"
            id="vertical-expanded-legacy-toggle-button"
            aria-labelledby="vertical-expanded-legacy-toggle-text vertical-expanded-legacy-toggle-button"
          >
            <span class="pf-v6-c-button__icon">
              <span class="pf-v6-c-tabs__toggle-icon">
                <i class="fas fa-angle-right" aria-hidden="true"></i>
              </span>
            </span>
          </button>
        </div>
        <span
          class="pf-v6-c-tabs__toggle-text"
          id="vertical-expanded-legacy-toggle-text"
        >Containers</span>
      </div>

      <ul class="pf-v6-c-tabs__list" role="tablist">
        <li class="pf-v6-c-tabs__item" role="presentation">
          <button
            type="button"
            class="pf-v6-c-tabs__link"
            role="tab"
            id="vertical-expanded-legacy-users-link"
          >
            <span class="pf-v6-c-tabs__item-text">Users</span>
          </button>
        </li>
        <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
          <button
            type="button"
            class="pf-v6-c-tabs__link"
            role="tab"
            id="vertical-expanded-legacy-containers-link"
          >
            <span class="pf-v6-c-tabs__item-text">Containers</span>
          </button>
        </li>
        <li class="pf-v6-c-tabs__item" role="presentation">
          <button
            type="button"
            class="pf-v6-c-tabs__link"
            role="tab"
            id="vertical-expanded-legacy-database-link"
          >
            <span class="pf-v6-c-tabs__item-text">Database</span>
          </button>
        </li>

        <li class="pf-v6-c-tabs__item" role="presentation">
          <button
            type="button"
            class="pf-v6-c-tabs__link"
            role="tab"
            id="vertical-expanded-legacy-server-link"
          >
            <span class="pf-v6-c-tabs__item-text">Server</span>
          </button>
        </li>
        <li class="pf-v6-c-tabs__item" role="presentation">
          <button
            type="button"
            class="pf-v6-c-tabs__link"
            role="tab"
            id="vertical-expanded-legacy-system-link"
          >
            <span class="pf-v6-c-tabs__item-text">System</span>
          </button>
        </li>
        <li class="pf-v6-c-tabs__item" role="presentation">
          <button
            type="button"
            class="pf-v6-c-tabs__link"
            role="tab"
            id="vertical-expanded-legacy-network-wired-link"
          >
            <span class="pf-v6-c-tabs__item-text">Network</span>
          </button>
        </li>
      </ul>
    </div>

### Vertical expandable responsive example (deprecated)

    <div
      class="pf-v6-c-tabs pf-m-expandable pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable-on-lg pf-m-non-expandable-on-xl"
      role="region"
      id="vertical-expandable-responsive-legacy"
    >
      <div class="pf-v6-c-tabs__toggle">
        <div class="pf-v6-c-tabs__toggle-button">
          <button
            class="pf-v6-c-button pf-m-plain"
            type="button"
            aria-label="Details"
            aria-expanded="true"
            id="vertical-expandable-responsive-legacy-toggle-button"
            aria-labelledby="vertical-expandable-responsive-legacy-toggle-text vertical-expandable-responsive-legacy-toggle-button"
          >
            <span class="pf-v6-c-button__icon">
              <span class="pf-v6-c-tabs__toggle-icon">
                <i class="fas fa-angle-right" aria-hidden="true"></i>
              </span>
            </span>
          </button>
        </div>
        <span
          class="pf-v6-c-tabs__toggle-text"
          id="vertical-expandable-responsive-legacy-toggle-text"
        >Containers</span>
      </div>

      <ul class="pf-v6-c-tabs__list" role="tablist">
        <li class="pf-v6-c-tabs__item" role="presentation">
          <button
            type="button"
            class="pf-v6-c-tabs__link"
            role="tab"
            id="vertical-expandable-responsive-legacy-users-link"
          >
            <span class="pf-v6-c-tabs__item-text">Users</span>
          </button>
        </li>
        <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
          <button
            type="button"
            class="pf-v6-c-tabs__link"
            role="tab"
            id="vertical-expandable-responsive-legacy-containers-link"
          >
            <span class="pf-v6-c-tabs__item-text">Containers</span>
          </button>
        </li>
        <li class="pf-v6-c-tabs__item" role="presentation">
          <button
            type="button"
            class="pf-v6-c-tabs__link"
            role="tab"
            id="vertical-expandable-responsive-legacy-database-link"
          >
            <span class="pf-v6-c-tabs__item-text">Database</span>
          </button>
        </li>

        <li class="pf-v6-c-tabs__item" role="presentation">
          <button
            type="button"
            class="pf-v6-c-tabs__link"
            role="tab"
            id="vertical-expandable-responsive-legacy-server-link"
          >
            <span class="pf-v6-c-tabs__item-text">Server</span>
          </button>
        </li>
        <li class="pf-v6-c-tabs__item" role="presentation">
          <button
            type="button"
            class="pf-v6-c-tabs__link"
            role="tab"
            id="vertical-expandable-responsive-legacy-system-link"
          >
            <span class="pf-v6-c-tabs__item-text">System</span>
          </button>
        </li>
        <li class="pf-v6-c-tabs__item" role="presentation">
          <button
            type="button"
            class="pf-v6-c-tabs__link"
            role="tab"
            id="vertical-expandable-responsive-legacy-network-wired-link"
          >
            <span class="pf-v6-c-tabs__item-text">Network</span>
          </button>
        </li>
      </ul>
    </div>

## Box

### Box tabs example

### Box overflow example

### Box vertical example

### Box tabs secondary variant example

## Tab insets

### Default tab insets example

### Box tab insets example

### Page insets example

### Insets usage

Class | Applied to | Outcome
--- | --- | ---
`.pf-m-inset-{none, sm, md, lg, xl, 2xl, 3xl}{-on-[sm, md, lg, xl, 2xl]}` | `.pf-v6-c-tabs` | Modifies the tabs component padding/inset to visually match padding of other adjacent components.
`.pf-m-page-insets` | `.pf-v6-c-tabs` | Modifies the tabs component padding/inset to visually match padding of page elements.

## Icons

### Icons and text example

## Sub tabs

### Tabs with sub tabs example

### Box tabs with sub tabs example

## Filled

### Filled tabs example

### Filled with icons example

### Filled box example

### Filled box with icons example

### Filled usage

Class | Applied to | Outcome
--- | --- | ---
`.pf-m-fill` | `.pf-v6-c-tabs` | Modifies the tabs to fill the available space. Required

## Tabs as navigation

### Using the nav element example

### Sub tabs using the nav element example

## Tab item actions

### Help button example

### Close button example

### Help and close button example

## Add tab button

### Add tab button example

## Tab content

### Default tab content example

### Padding

### Secondary

## Documentation

### Tabs overview

The tabs component should only be used to change content views within a page. The similar-looking but semantically different horizontal nav component is available for general navigation use cases.

Whenever a list of tabs is unique on the current page, it can be used in a `<nav>` element. Cases where the same set of tabs are duplicated in multiple regions on a page (e.g. cards on a dashboard) are less likely to benefit from using the `<nav>` element.

### Usage

Class | Applied to | Outcome
--- | --- | ---
`.pf-v6-c-tabs` | `<nav>`, `<div>` | Initiates the tabs component. Required
`.pf-v6-c-tabs__list` | `<ul>` | Initiates a tabs component list. Required
`.pf-v6-c-tabs__item` | `<li>` | Initiates a tabs component item. Required
`.pf-v6-c-tabs__item-text` | `<span>` | Initiates a tabs component item icon. Required
`.pf-v6-c-tabs__item-icon` | `<span>` | Initiates a tabs component item text. Required
`.pf-v6-c-tabs__item-close` | `<span>` | Initiates a tabs component item close.
`.pf-v6-c-tabs__item-close-icon` | `<span>` | Initiates a tabs component item close icon.
`.pf-v6-c-tabs__link` | `<button>`, `<a>` | Initiates a tabs component link. Required
`.pf-v6-c-tabs__scroll-button` | `<div>` | Initiates a tabs component scroll button container.
`.pf-v6-c-tabs__add` | `<span>` | Initiates a tabs component add button.
`.pf-v6-c-tabs__toggle` | `<div>` | Initiates a tabs expandable toggle.
`.pf-v6-c-tabs__toggle-button` | `<button>` | Initiates a tabs expandable toggle button.
`.pf-v6-c-tabs__toggle-icon` | `<span>` | Initiates a tabs expandable toggle icon.
`.pf-v6-c-tabs__toggle-text` | `<span>` | Initiates a tabs expandable toggle text.
`.pf-m-tubtab` | `.pf-v6-c-tabs` | Applies subtab styling to the tab component.
`.pf-m-no-border-bottom` | `.pf-v6-c-tabs` | Removes bottom border from a tab component.
`.pf-m-box` | `.pf-v6-c-tabs` | Applies box styling to the tab component.
`.pf-m-vertical` | `.pf-v6-c-tabs` | Applies vertical styling to the tab component.
`.pf-m-fill` | `.pf-v6-c-tabs` | Modifies the tabs to fill the available space.
`.pf-m-current` | `.pf-v6-c-tabs__item` | Indicates that a tab item is currently selected.
`.pf-m-action` | `.pf-v6-c-tabs__item` | Indicates that a tab item contains actions other than the tab link.
`.pf-m-overflow` | `.pf-v6-c-tabs__item` | Applies overflow menu styling to a tab item.
`.pf-m-expanded` | `.pf-v6-c-tabs__item` | Applies expanded styling to the overflow menu tab item.
`.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[md, lg, xl, 2xl]}` | `.pf-v6-c-tabs` | Modifies tabs horizontal padding at optional breakpoint.
`.pf-m-page-insets` | `.pf-v6-c-tabs` | Modifies the tabs component padding/inset to visually match padding of page elements.
`.pf-m-secondary` | `.pf-v6-c-tabs.pf-m-box` | Modifies the tabs component tab background colors for the box variant.
`.pf-m-expandable{-on-[breakpoint]}` | `.pf-v6-c-tabs` | Modifies the tabs component to be expandable via a toggle at optional breakpoint. Note: works with vertical tabs only.
`.pf-m-non-expandable{-on-[breakpoint]}` | `.pf-v6-c-tabs` | Modifies the tabs component to be non-expandable at optional breakpoint.
`.pf-m-expanded` | `.pf-v6-c-tabs` | Modifies the expandable tabs component for the expanded state.
`.pf-m-disabled` | `a.pf-v6-c-tabs__link` | Modifies a tabs link for disabled styles.
`.pf-m-aria-disabled` | `.pf-v6-c-tabs__link` | Modifies a tabs link for disabled styles, but is still hoverable/focusable.

### Tab content accessibility

Attribute | Applied to | Outcome
--- | --- | ---
`role="tabpanel"` | `.pf-v6-c-tab-content` | Indicates that the element serves as a container for a set of tabs. Required
`aria-labelledby=[ID of tab element]` | `.pf-v6-c-tab-content` | Provides an accessible name for the tab panel by referring to the tab element that controls it. Required
`id=[ID of tab panel]` | `.pf-v6-c-tab-content` | Provides an ID for the tab panel, and should be used as the value of `aria-controls` on the tab element that controls the panel. Required
`hidden` | `.pf-v6-c-tab-content` | Indicates that the tab panel is not visible. Required on all but the active tab panel
`tabindex="0"` | `.pf-v6-c-tab-content` | Puts the tab panel in the page tab sequence and facilitates movement to panel content for assistive technology users. Required

### Tab content usage

Class | Applied to | Outcome
--- | --- | ---
`.pf-v6-c-tab-content` | `<section>` | Initiates the tab content component. Required
`.pf-v6-c-tab-content__body` | `<div>` | Initiates the tab content body component.
`.pf-m-padding` | `.pf-v6-c-tab-content__body` | Modifies the tab content body component padding.
`.pf-m-secondary` | `.pf-v6-c-tab-content` | Modifies the tab content component for secondary styles.

##
CSS variables