@patternfly/patternfly
Version:
Assets, source, tooling, and content for PatternFly 4
1,830 lines (1,734 loc) • 320 kB
Markdown
---
id: Tabs
section: components
cssPrefix: pf-v6-c-tabs
---# Examples
## Default
### Default tabs example
```html
<div class="pf-v6-c-tabs" role="region" id="default-tabs">
<div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
<button
class="pf-v6-c-button pf-m-plain"
type="button"
aria-label="Scroll left"
disabled
>
<span class="pf-v6-c-button__icon">
<i class="fas fa-angle-left" aria-hidden="true"></i>
</span>
</button>
</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="default-tabs-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="default-tabs-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="default-tabs-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"
disabled
role="tab"
id="default-tabs-disabled-link"
>
<span class="pf-v6-c-tabs__item-text">Disabled</span>
</button>
</li>
<li class="pf-v6-c-tabs__item" role="presentation">
<button
type="button"
class="pf-v6-c-tabs__link pf-m-aria-disabled"
aria-disabled="true"
role="tab"
id="default-tabs-aria-disabled-link"
>
<span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
</button>
</li>
<li class="pf-v6-c-tabs__item" role="presentation">
<button
type="button"
class="pf-v6-c-tabs__link"
role="tab"
id="default-tabs-network-wired-link"
>
<span class="pf-v6-c-tabs__item-text">Network</span>
</button>
</li>
</ul>
<div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
<button
class="pf-v6-c-button pf-m-plain"
type="button"
aria-label="Scroll right"
disabled
>
<span class="pf-v6-c-button__icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</button>
</div>
</div>
```
### 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
```html
<div
class="pf-v6-c-tabs pf-m-scrollable"
role="region"
id="overflow-beginning-of-list"
>
<div class="pf-v6-c-tabs__scroll-button">
<button
class="pf-v6-c-button pf-m-plain"
type="button"
aria-label="Scroll left"
disabled
>
<span class="pf-v6-c-button__icon">
<i class="fas fa-angle-left" aria-hidden="true"></i>
</span>
</button>
</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="overflow-beginning-of-list-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="overflow-beginning-of-list-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="overflow-beginning-of-list-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="overflow-beginning-of-list-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="overflow-beginning-of-list-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="overflow-beginning-of-list-network-wired-link"
>
<span class="pf-v6-c-tabs__item-text">Network</span>
</button>
</li>
<li class="pf-v6-c-tabs__item" role="presentation">
<button
type="button"
class="pf-v6-c-tabs__link"
role="tab"
id="overflow-beginning-of-list-cloud-link"
>
<span class="pf-v6-c-tabs__item-text">Hybrid Cloud</span>
</button>
</li>
<li class="pf-v6-c-tabs__item" role="presentation">
<button
type="button"
class="pf-v6-c-tabs__link"
role="tab"
id="overflow-beginning-of-list-automation-link"
>
<span class="pf-v6-c-tabs__item-text">Automation</span>
</button>
</li>
<li class="pf-v6-c-tabs__item" role="presentation">
<button
type="button"
class="pf-v6-c-tabs__link"
role="tab"
id="overflow-beginning-of-list-files-link"
>
<span class="pf-v6-c-tabs__item-text">Files</span>
</button>
</li>
</ul>
<div class="pf-v6-c-tabs__scroll-button">
<button
class="pf-v6-c-button pf-m-plain"
type="button"
aria-label="Scroll right"
>
<span class="pf-v6-c-button__icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</button>
</div>
</div>
```
### 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
```html
<div class="pf-v6-c-tabs pf-m-overflow" role="region" id="horizontal-overflow">
<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="horizontal-overflow-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="horizontal-overflow-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="horizontal-overflow-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="horizontal-overflow-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="horizontal-overflow-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="horizontal-overflow-network-wired-link"
>
<span class="pf-v6-c-tabs__item-text">Network</span>
</button>
</li>
<li class="pf-v6-c-tabs__item pf-m-overflow" role="presentation">
<button
type="button"
class="pf-v6-c-tabs__link"
role="tab"
id="horizontal-overflow-more-link"
>
<span class="pf-v6-c-tabs__item-text">More</span>
<span class="pf-v6-c-tabs__link-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</button>
</li>
</ul>
</div>
```
### Horizontal overflow expanded example
```html
<div
class="pf-v6-c-tabs pf-m-overflow"
role="region"
id="horizontal-overflow-expanded"
>
<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="horizontal-overflow-expanded-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="horizontal-overflow-expanded-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="horizontal-overflow-expanded-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="horizontal-overflow-expanded-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="horizontal-overflow-expanded-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="horizontal-overflow-expanded-network-wired-link"
>
<span class="pf-v6-c-tabs__item-text">Network</span>
</button>
</li>
<li class="pf-v6-c-tabs__item pf-m-overflow" role="presentation">
<button
type="button"
class="pf-v6-c-tabs__link pf-m-expanded"
aria-expanded="true"
role="tab"
id="horizontal-overflow-expanded-more-link"
>
<span class="pf-v6-c-tabs__item-text">More</span>
<span class="pf-v6-c-tabs__link-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</button>
</li>
</ul>
</div>
```
### Horizontal overflow selected example
```html
<div
class="pf-v6-c-tabs pf-m-overflow"
role="region"
id="horizontal-overflow-selected"
>
<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="horizontal-overflow-selected-users-link"
>
<span class="pf-v6-c-tabs__item-text">Users</span>
</button>
</li>
<li class="pf-v6-c-tabs__item" role="presentation">
<button
type="button"
class="pf-v6-c-tabs__link"
role="tab"
id="horizontal-overflow-selected-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="horizontal-overflow-selected-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="horizontal-overflow-selected-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="horizontal-overflow-selected-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="horizontal-overflow-selected-network-wired-link"
>
<span class="pf-v6-c-tabs__item-text">Network</span>
</button>
</li>
<li
class="pf-v6-c-tabs__item pf-m-current pf-m-overflow"
role="presentation"
>
<button
type="button"
class="pf-v6-c-tabs__link"
role="tab"
id="horizontal-overflow-selected-more-link"
>
<span class="pf-v6-c-tabs__item-text">More</span>
<span class="pf-v6-c-tabs__link-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</button>
</li>
</ul>
</div>
```
## Vertical
### Vertical tabs example
```html
<div class="pf-v6-c-tabs pf-m-vertical" role="region" id="vertical-tabs">
<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-tabs-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-tabs-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-tabs-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"
disabled
role="tab"
id="vertical-tabs-disabled-link"
>
<span class="pf-v6-c-tabs__item-text">Disabled</span>
</button>
</li>
<li class="pf-v6-c-tabs__item" role="presentation">
<button
type="button"
class="pf-v6-c-tabs__link pf-m-aria-disabled"
aria-disabled="true"
role="tab"
id="vertical-tabs-aria-disabled-link"
>
<span class="pf-v6-c-tabs__item-text">ARIA disabled</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-tabs-network-wired-link"
>
<span class="pf-v6-c-tabs__item-text">Network</span>
</button>
</li>
</ul>
</div>
```
### Vertical expandable example
```html
<div
class="pf-v6-c-tabs pf-m-vertical pf-m-expandable"
role="region"
id="vertical-expandable"
>
<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="false"
aria-label="Details"
id="vertical-expandable-toggle-button"
aria-labelledby="vertical-expandable-toggle-text vertical-expandable-toggle-button"
>
<span class="pf-v6-c-button__icon pf-m-start">
<span class="pf-v6-c-tabs__toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
<span class="pf-v6-c-button__text">
<span
class="pf-v6-c-tabs__toggle-text"
id="vertical-expandable-toggle-text"
>Containers</span>
</span>
</button>
</div>
</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-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-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-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-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-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-network-wired-link"
>
<span class="pf-v6-c-tabs__item-text">Network</span>
</button>
</li>
</ul>
</div>
```
### Vertical expanded example
```html
<div
class="pf-v6-c-tabs pf-m-vertical pf-m-expandable pf-m-expanded"
role="region"
id="vertical-expanded"
>
<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-toggle-button"
aria-labelledby="vertical-expanded-toggle-text vertical-expanded-toggle-button"
>
<span class="pf-v6-c-button__icon pf-m-start">
<span class="pf-v6-c-tabs__toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
<span class="pf-v6-c-button__text">
<span
class="pf-v6-c-tabs__toggle-text"
id="vertical-expanded-toggle-text"
>Containers</span>
</span>
</button>
</div>
</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-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-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-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-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-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-network-wired-link"
>
<span class="pf-v6-c-tabs__item-text">Network</span>
</button>
</li>
</ul>
</div>
```
### Vertical expandable responsive example
```html
<div
class="pf-v6-c-tabs pf-m-vertical pf-m-expandable pf-m-non-expandable-on-md pf-m-expandable-on-lg pf-m-non-expandable-on-xl"
role="region"
id="vertical-expandable-responsive"
>
<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="false"
aria-label="Details"
id="vertical-expandable-responsive-toggle-button"
aria-labelledby="vertical-expandable-responsive-toggle-text vertical-expandable-responsive-toggle-button"
>
<span class="pf-v6-c-button__icon pf-m-start">
<span class="pf-v6-c-tabs__toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
<span class="pf-v6-c-button__text">
<span
class="pf-v6-c-tabs__toggle-text"
id="vertical-expandable-responsive-toggle-text"
>Containers</span>
</span>
</button>
</div>
</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-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-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-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-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-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-network-wired-link"
>
<span class="pf-v6-c-tabs__item-text">Network</span>
</button>
</li>
</ul>
</div>
```
### Vertical expandable example (deprecated)
```html isDeprecated
<div
class="pf-v6-c-tabs pf-m-vertical pf-m-expandable"
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-expanded="false"
aria-label="Details"
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-vertical pf-m-expandable pf-m-expanded"
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-vertical pf-m-expandable 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-expanded="false"
aria-label="Details"
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
```html
<div class="pf-v6-c-tabs pf-m-box" role="region" id="box-tabs">
<div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
<button
class="pf-v6-c-button pf-m-plain"
type="button"
aria-label="Scroll left"
disabled
>
<span class="pf-v6-c-button__icon">
<i class="fas fa-angle-left" aria-hidden="true"></i>
</span>
</button>
</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="box-tabs-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="box-tabs-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="box-tabs-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"
disabled
role="tab"
id="box-tabs-disabled-link"
>
<span class="pf-v6-c-tabs__item-text">Disabled</span>
</button>
</li>
<li class="pf-v6-c-tabs__item" role="presentation">
<button
type="button"
class="pf-v6-c-tabs__link pf-m-aria-disabled"
aria-disabled="true"
role="tab"
id="box-tabs-aria-disabled-link"
>
<span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
</button>
</li>
<li class="pf-v6-c-tabs__item" role="presentation">
<button
type="button"
class="pf-v6-c-tabs__link"
role="tab"
id="box-tabs-network-wired-link"
>
<span class="pf-v6-c-tabs__item-text">Network</span>
</button>
</li>
</ul>
<div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
<button
class="pf-v6-c-button pf-m-plain"
type="button"
aria-label="Scroll right"
disabled
>
<span class="pf-v6-c-button__icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</button>
</div>
</div>
```
### Box overflow example
```html
<div
class="pf-v6-c-tabs pf-m-box pf-m-scrollable"
role="region"
id="box-overflow"
>
<div class="pf-v6-c-tabs__scroll-button">
<button
class="pf-v6-c-button pf-m-plain"
type="button"
aria-label="Scroll left"
disabled
>
<span class="pf-v6-c-button__icon">
<i class="fas fa-angle-left" aria-hidden="true"></i>
</span>
</button>
</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="box-overflow-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="box-overflow-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="box-overflow-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="box-overflow-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="box-overflow-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="box-overflow-network-wired-link"
>
<span class="pf-v6-c-tabs__item-text">Network</span>
</button>
</li>
<li class="pf-v6-c-tabs__item" role="presentation">
<button
type="button"
class="pf-v6-c-tabs__link"
role="tab"
id="box-overflow-cloud-link"
>
<span class="pf-v6-c-tabs__item-text">Hybrid Cloud</span>
</button>
</li>
<li class="pf-v6-c-tabs__item" role="presentation">
<button
type="button"
class="pf-v6-c-tabs__link"
role="tab"
id="box-overflow-automation-link"
>
<span class="pf-v6-c-tabs__item-text">Automation</span>
</button>
</li>
<li class="pf-v6-c-tabs__item" role="presentation">
<button
type="button"
class="pf-v6-c-tabs__link"
role="tab"
id="box-overflow-files-link"
>
<span class="pf-v6-c-tabs__item-text">Files</span>
</button>
</li>
</ul>
<div class="pf-v6-c-tabs__scroll-button">
<button
class="pf-v6-c-button pf-m-plain"
type="button"
aria-label="Scroll right"
>
<span class="pf-v6-c-button__icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</button>
</div>
</div>
```
### Box vertical example
```html
<div
class="pf-v6-c-tabs pf-m-vertical pf-m-box"
role="region"
id="box-vertical"
>
<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="box-vertical-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="box-vertical-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="box-vertical-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"
disabled
role="tab"
id="box-vertical-disabled-link"
>
<span class="pf-v6-c-tabs__item-text">Disabled</span>
</button>
</li>
<li class="pf-v6-c-tabs__item" role="presentation">
<button
type="button"
class="pf-v6-c-tabs__link pf-m-aria-disabled"
aria-disabled="true"
role="tab"
id="box-vertical-aria-disabled-link"
>
<span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
</button>
</li>
<li class="pf-v6-c-tabs__item" role="presentation">
<button
type="button"
class="pf-v6-c-tabs__link"
role="tab"
id="box-vertical-network-wired-link"
>
<span class="pf-v6-c-tabs__item-text">Network</span>
</button>
</li>
</ul>
</div>
```
### Box tabs secondary variant example
```html
<div
class="pf-v6-c-tabs pf-m-box pf-m-secondary"
role="region"
id="box-tabs-secondary"
>
<div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
<button
class="pf-v6-c-button pf-m-plain"
type="button"
aria-label="Scroll left"
disabled
>
<span class="pf-v6-c-button__icon">
<i class="fas fa-angle-left" aria-hidden="true"></i>
</span>
</button>
</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="box-tabs-secondary-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="box-tabs-secondary-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="box-tabs-secondary-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"
disabled
role="tab"
id="box-tabs-secondary-disabled-link"
>
<span class="pf-v6-c-tabs__item-text">Disabled</span>
</button>
</li>
<li class="pf-v6-c-tabs__item" role="presentation">
<button
type="button"
class="pf-v6-c-tabs__link pf-m-aria-disabled"
aria-disabled="true"
role="tab"
id="box-tabs-secondary-aria-disabled-link"
>
<span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
</button>
</li>
<li class="pf-v6-c-tabs__item" role="presentation">
<button
type="button"
class="pf-v6-c-tabs__link"
role="tab"
id="box-tabs-secondary-network-wired-link"
>
<span class="pf-v6-c-tabs__item-text">Network</span>
</button>
</li>
</ul>
<div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
<button
class="pf-v6-c-button pf-m-plain"
type="button"
aria-label="Scroll right"
disabled
>
<span class="pf-v6-c-button__icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</button>
</div>
</div>
<div class="tabs-example-block tabs-example-block--m-secondary"></div>
```
## Tab insets
### Default tab insets example
```html
<div
class="pf-v6-c-tabs pf-m-inset-sm-on-md pf-m-inset-lg-on-lg pf-m-inset-2xl-on-xl"
role="region"
id="default-tab-insets"
>
<div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
<button
class="pf-v6-c-button pf-m-plain"
type="button"
aria-label="Scroll left"
disabled
>
<span class="pf-v6-c-button__icon">
<i class="fas fa-angle-left" aria-hidden="true"></i>
</span>
</button>
</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="default-tab-insets-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="default-tab-insets-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="default-tab-insets-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="default-tab-insets-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="default-tab-insets-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="default-tab-insets-network-wired-link"
>
<span class="pf-v6-c-tabs__item-text">Network</span>
</button>
</li>
</ul>
<div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
<button
class="pf-v6-c-button pf-m-plain"
type="button"
aria-label="Scroll right"
disabled
>
<span class="pf-v6-c-button__icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</button>
</div>
</div>
```
### Box tab insets example
```html
<div
class="pf-v6-c-tabs pf-m-box pf-m-inset-sm-on-md pf-m-inset-lg-on-lg pf-m-inset-2xl-on-xl"
role="region"
id="box-tab-insets"
>
<div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
<button
class="pf-v6-c-button pf-m-plain"
type="button"
aria-label="Scroll left"
disabled
>
<span class="pf-v6-c-button__icon">
<i class="fas fa-angle-left" aria-hidden="true"></i>
</span>
</button>
</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="box-tab-insets-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="box-tab-insets-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="box-tab-insets-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="box-tab-insets-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="box-tab-insets-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="box-tab-insets-network-wired-link"
>
<span class="pf-v6-c-tabs__item-text">Network</span>
</button>
</li>
</ul>
<div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
<button
class="pf-v6-c-button pf-m-plain"
type="button"
aria-label="Scroll right"
disabled
>
<span class="pf-v6-c-button__icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</button>
</div>
</div>
```
### Page insets example
```html
<div class="pf-v6-c-tabs pf-m-page-insets" role="region" id="page-insets">
<div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
<button
class="pf-v6-c-button pf-m-plain"
type="button"
aria-label="Scroll left"
disabled
>
<span class="pf-v6-c-button__icon">
<i class="fas fa-angle-left" aria-hidden="true"></i>
</span>
</button>
</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="page-insets-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="page-insets-containers-link"
>
<span class="pf-v6-c-tabs_