# Examples

## Default

### Default tabs example


import Example1 from './Example1.html?raw'

<LiveExample html={Example1} />

### 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


import Example2 from './Example2.html?raw'

<LiveExample html={Example2} />

### 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


import Example3 from './Example3.html?raw'

<LiveExample html={Example3} />

### Horizontal overflow expanded example


import Example4 from './Example4.html?raw'

<LiveExample html={Example4} />

### Horizontal overflow selected example


import Example5 from './Example5.html?raw'

<LiveExample html={Example5} />

## Vertical

### Vertical tabs example


import Example6 from './Example6.html?raw'

<LiveExample html={Example6} />

### Vertical expandable example


import Example7 from './Example7.html?raw'

<LiveExample html={Example7} />

### Vertical expanded example


import Example8 from './Example8.html?raw'

<LiveExample html={Example8} />

### Vertical expandable responsive example


import Example9 from './Example9.html?raw'

<LiveExample html={Example9} />

### Vertical expandable example (deprecated)

```html isDeprecated
<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)

```html isDeprecated
<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)

```html isDeprecated
<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


import Example10 from './Example10.html?raw'

<LiveExample html={Example10} />

### Box overflow example


import Example11 from './Example11.html?raw'

<LiveExample html={Example11} />

### Box vertical example


import Example12 from './Example12.html?raw'

<LiveExample html={Example12} />

### Box tabs secondary variant example


import Example13 from './Example13.html?raw'

<LiveExample html={Example13} />

## Tab insets

### Default tab insets example


import Example14 from './Example14.html?raw'

<LiveExample html={Example14} />

### Box tab insets example


import Example15 from './Example15.html?raw'

<LiveExample html={Example15} />

### Page insets example


import Example16 from './Example16.html?raw'

<LiveExample html={Example16} />

### 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


import Example17 from './Example17.html?raw'

<LiveExample html={Example17} />

## Sub tabs

### Tabs with sub tabs example


import Example18 from './Example18.html?raw'

<LiveExample html={Example18} />

### Box tabs with sub tabs example


import Example19 from './Example19.html?raw'

<LiveExample html={Example19} />

## Filled

### Filled tabs example


import Example20 from './Example20.html?raw'

<LiveExample html={Example20} />

### Filled with icons example


import Example21 from './Example21.html?raw'

<LiveExample html={Example21} />

### Filled box example


import Example22 from './Example22.html?raw'

<LiveExample html={Example22} />

### Filled box with icons example


import Example23 from './Example23.html?raw'

<LiveExample html={Example23} />

### 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


import Example24 from './Example24.html?raw'

<LiveExample html={Example24} />

### Sub tabs using the nav element example


import Example25 from './Example25.html?raw'

<LiveExample html={Example25} />

## Tab item actions

### Help button example


import Example26 from './Example26.html?raw'

<LiveExample html={Example26} />

### Close button example


import Example27 from './Example27.html?raw'

<LiveExample html={Example27} />

### Help and close button example


import Example28 from './Example28.html?raw'

<LiveExample html={Example28} />

## Add tab button

### Add tab button example


import Example29 from './Example29.html?raw'

<LiveExample html={Example29} />

## Tab content

### Default tab content example


import Example30 from './Example30.html?raw'

<LiveExample html={Example30} />

### Padding


import Example31 from './Example31.html?raw'

<LiveExample html={Example31} />

### Secondary


import Example32 from './Example32.html?raw'

<LiveExample html={Example32} />

## 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](/components/navigation/#horizontal) 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](/tokens/all-patternfly-tokens). |
| `.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](/tokens/all-patternfly-tokens). **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](/tokens/all-patternfly-tokens). |
| `.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. |