@patternfly/patternfly
Version:
Assets, source, tooling, and content for PatternFly 4
1,250 lines (1,230 loc) • 137 kB
Markdown
---
id: 'Tabs'
section: components
---## Examples
### Open tabs
```html isFullscreen
<div class="pf-v5-c-page" id="tabs-tables-and-tabs-example">
<div class="pf-v5-c-skip-to-content">
<a
class="pf-v5-c-button pf-m-primary"
href="#main-content-tabs-tables-and-tabs-example"
>Skip to content</a>
</div>
<header class="pf-v5-c-masthead" id="tabs-tables-and-tabs-example-masthead">
<span class="pf-v5-c-masthead__toggle">
<button
class="pf-v5-c-button pf-m-plain"
type="button"
aria-label="Global navigation"
>
<i class="fas fa-bars" aria-hidden="true"></i>
</button>
</span>
<div class="pf-v5-c-masthead__main">
<a class="pf-v5-c-masthead__brand" href="#">
<img
class="pf-v5-c-brand"
src="/assets/images/pf-logo.svg"
alt="PatternFly logo"
style="--pf-v5-c-brand--Height:36px"
/>
</a>
</div>
<div class="pf-v5-c-masthead__content">
<div
class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
id="tabs-tables-and-tabs-example-masthead-toolbar"
>
<div class="pf-v5-c-toolbar__content">
<div class="pf-v5-c-toolbar__content-section">
<div
class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
>
<div
class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
>
<div class="pf-v5-c-toolbar__item">
<button
class="pf-v5-c-menu-toggle pf-m-plain"
type="button"
aria-expanded="false"
aria-label="Application launcher"
>
<i class="fas fa-th" aria-hidden="true"></i>
</button>
</div>
<div class="pf-v5-c-toolbar__item">
<button
class="pf-v5-c-menu-toggle pf-m-plain"
type="button"
aria-expanded="false"
aria-label="Settings"
>
<i class="fas fa-cog" aria-hidden="true"></i>
</button>
</div>
<div class="pf-v5-c-toolbar__item">
<button
class="pf-v5-c-menu-toggle pf-m-plain"
type="button"
aria-expanded="false"
aria-label="Help"
>
<i class="fas fa-question-circle" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
<button
class="pf-v5-c-menu-toggle pf-m-plain"
type="button"
aria-expanded="false"
aria-label="Actions"
>
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
<button
class="pf-v5-c-menu-toggle pf-m-full-height"
type="button"
aria-expanded="false"
>
<span class="pf-v5-c-menu-toggle__icon">
<img
class="pf-v5-c-avatar"
alt="Avatar image"
src="/assets/images/img_avatar-light.svg"
/>
</span>
<span class="pf-v5-c-menu-toggle__text">Ned Username</span>
<span class="pf-v5-c-menu-toggle__controls">
<span class="pf-v5-c-menu-toggle__toggle-icon">
<i class="fas fa-caret-down" aria-hidden="true"></i>
</span>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="pf-v5-c-page__sidebar">
<div class="pf-v5-c-page__sidebar-body">
<nav
class="pf-v5-c-nav"
id="tabs-tables-and-tabs-example-primary-nav"
aria-label="Global"
>
<ul class="pf-v5-c-nav__list" role="list">
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">System panel</a>
</li>
<li class="pf-v5-c-nav__item">
<a
href="#"
class="pf-v5-c-nav__link pf-m-current"
aria-current="page"
>Policy</a>
</li>
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Authentication</a>
</li>
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Network services</a>
</li>
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Server</a>
</li>
</ul>
</nav>
</div>
</div>
<main
class="pf-v5-c-page__main"
tabindex="-1"
id="main-content-tabs-tables-and-tabs-example"
>
<section class="pf-v5-c-page__main-breadcrumb pf-m-limit-width">
<div class="pf-v5-c-page__main-body">
<nav class="pf-v5-c-breadcrumb" aria-label="breadcrumb">
<ol class="pf-v5-c-breadcrumb__list" role="list">
<li class="pf-v5-c-breadcrumb__item">
<a href="#" class="pf-v5-c-breadcrumb__link">Section home</a>
</li>
<li class="pf-v5-c-breadcrumb__item">
<span class="pf-v5-c-breadcrumb__item-divider">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
</li>
<li class="pf-v5-c-breadcrumb__item">
<span class="pf-v5-c-breadcrumb__item-divider">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
</li>
<li class="pf-v5-c-breadcrumb__item">
<span class="pf-v5-c-breadcrumb__item-divider">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<a
href="#"
class="pf-v5-c-breadcrumb__link pf-m-current"
aria-current="page"
>Section landing</a>
</li>
</ol>
</nav>
</div>
</section>
<section class="pf-v5-c-page__main-section pf-m-limit-width pf-m-light">
<div class="pf-v5-c-page__main-body">
<div class="pf-v5-c-content">
<h1>Main title</h1>
<p>This is a full page demo.</p>
</div>
</div>
</section>
<section class="pf-v5-c-page__main-tabs pf-m-limit-width">
<div class="pf-v5-c-page__main-body">
<div
class="pf-v5-c-tabs pf-m-page-insets"
role="region"
id="tabs-tables-and-tabs-example-tabs"
>
<ul class="pf-v5-c-tabs__list" role="tablist">
<li class="pf-v5-c-tabs__item pf-m-current" role="presentation">
<button
type="button"
class="pf-v5-c-tabs__link"
role="tab"
aria-controls="tabs-tables-and-tabs-example-tabs-details-panel"
id="tabs-tables-and-tabs-example-tabs-details-link"
>
<span class="pf-v5-c-tabs__item-text">Details</span>
</button>
</li>
<li class="pf-v5-c-tabs__item" role="presentation">
<button
type="button"
class="pf-v5-c-tabs__link"
role="tab"
aria-controls="tabs-tables-and-tabs-example-tabs-yaml-panel"
id="tabs-tables-and-tabs-example-tabs-yaml-link"
>
<span class="pf-v5-c-tabs__item-text">YAML</span>
</button>
</li>
<li class="pf-v5-c-tabs__item" role="presentation">
<button
type="button"
class="pf-v5-c-tabs__link"
role="tab"
aria-controls="tabs-tables-and-tabs-example-tabs-environment-panel"
id="tabs-tables-and-tabs-example-tabs-environment-link"
>
<span class="pf-v5-c-tabs__item-text">Environment</span>
</button>
</li>
<li class="pf-v5-c-tabs__item" role="presentation">
<button
type="button"
class="pf-v5-c-tabs__link"
role="tab"
aria-controls="tabs-tables-and-tabs-example-tabs-logs-panel"
id="tabs-tables-and-tabs-example-tabs-logs-link"
>
<span class="pf-v5-c-tabs__item-text">Logs</span>
</button>
</li>
<li class="pf-v5-c-tabs__item" role="presentation">
<button
type="button"
class="pf-v5-c-tabs__link"
role="tab"
aria-controls="tabs-tables-and-tabs-example-tabs-events-panel"
id="tabs-tables-and-tabs-example-tabs-events-link"
>
<span class="pf-v5-c-tabs__item-text">Events</span>
</button>
</li>
<li class="pf-v5-c-tabs__item" role="presentation">
<button
type="button"
class="pf-v5-c-tabs__link"
role="tab"
aria-controls="tabs-tables-and-tabs-example-tabs-terminal-panel"
id="tabs-tables-and-tabs-example-tabs-terminal-link"
>
<span class="pf-v5-c-tabs__item-text">Terminal</span>
</button>
</li>
</ul>
</div>
</div>
</section>
<section class="pf-v5-c-page__main-section pf-m-limit-width pf-m-light">
<div class="pf-v5-c-page__main-body">
<section
class="pf-v5-c-tab-content"
aria-labelledby="tabs-tables-and-tabs-example-tabs-details-link"
id="tabs-tables-and-tabs-example-tabs-details-panel"
role="tabpanel"
tabindex="0"
>
<div class="pf-v5-c-tab-content__body">
<div class="pf-v5-l-flex pf-m-column">
<div class="pf-v5-l-flex__item pf-m-spacer-lg">
<h2
class="pf-v5-c-title pf-m-lg pf-v5-u-mt-sm"
id="-details-title"
>Pod details</h2>
</div>
<div class="pf-v5-l-flex__item">
<dl
class="pf-v5-c-description-list pf-m-2-col-on-lg"
aria-labelledby="-details-title"
>
<div class="pf-v5-c-description-list__group">
<dt class="pf-v5-c-description-list__term">Name</dt>
<dd class="pf-v5-c-description-list__description">
<div
class="pf-v5-c-description-list__text"
>3scale-control-fccb6ddb9-phyqv9</div>
</dd>
</div>
<div class="pf-v5-c-description-list__group">
<dt class="pf-v5-c-description-list__term">Status</dt>
<dd class="pf-v5-c-description-list__description">
<div class="pf-v5-c-description-list__text">
<div class="pf-v5-l-flex pf-m-space-items-sm">
<div class="pf-v5-l-flex__item">
<i
class="fas fa-fw fa-check-circle"
aria-hidden="true"
></i>
</div>
<div class="pf-v5-l-flex__item">Running</div>
</div>
</div>
</dd>
</div>
<div class="pf-v5-c-description-list__group">
<dt class="pf-v5-c-description-list__term">Namespace</dt>
<dd class="pf-v5-c-description-list__description">
<div class="pf-v5-c-description-list__text">
<div class="pf-v5-l-flex pf-m-space-items-sm">
<div class="pf-v5-l-flex__item">
<span class="pf-v5-c-label pf-m-cyan">
<span class="pf-v5-c-label__content">
<span class="pf-v5-c-label__text">NS</span>
</span>
</span>
</div>
<div class="pf-v5-l-flex__item">
<a href="#">knative-serving-ingress</a>
</div>
</div>
</div>
</dd>
</div>
<div class="pf-v5-c-description-list__group">
<dt class="pf-v5-c-description-list__term">Restart policy</dt>
<dd class="pf-v5-c-description-list__description">
<div class="pf-v5-c-description-list__text">Always restart</div>
</dd>
</div>
<div class="pf-v5-c-description-list__group">
<dt class="pf-v5-c-description-list__term">Labels</dt>
<dd class="pf-v5-c-description-list__description">
<div class="pf-v5-c-description-list__text">
<div class="pf-v5-c-label-group">
<div class="pf-v5-c-label-group__main">
<ul
class="pf-v5-c-label-group__list"
role="list"
aria-label="Group of labels"
>
<li class="pf-v5-c-label-group__list-item">
<span class="pf-v5-c-label pf-m-outline">
<span class="pf-v5-c-label__content">
<span
class="pf-v5-c-label__text"
>app=3scale-gateway</span>
</span>
</span>
</li>
<li class="pf-v5-c-label-group__list-item">
<span class="pf-v5-c-label pf-m-outline">
<span class="pf-v5-c-label__content">
<span
class="pf-v5-c-label__text"
>pod-template-has=6747686899</span>
</span>
</span>
</li>
</ul>
</div>
</div>
</div>
</dd>
</div>
<div class="pf-v5-c-description-list__group">
<dt
class="pf-v5-c-description-list__term"
>Active deadline seconds</dt>
<dd class="pf-v5-c-description-list__description">
<div class="pf-v5-c-description-list__text">Not configured</div>
</dd>
</div>
<div class="pf-v5-c-description-list__group">
<dt class="pf-v5-c-description-list__term">Tolerations</dt>
<dd class="pf-v5-c-description-list__description">
<div class="pf-v5-c-description-list__text">stuff</div>
</dd>
</div>
<div class="pf-v5-c-description-list__group">
<dt class="pf-v5-c-description-list__term">Pod IP</dt>
<dd class="pf-v5-c-description-list__description">
<div class="pf-v5-c-description-list__text">10.345.2.197</div>
</dd>
</div>
<div class="pf-v5-c-description-list__group">
<dt class="pf-v5-c-description-list__term">Annotations</dt>
<dd class="pf-v5-c-description-list__description">
<div class="pf-v5-c-description-list__text">stuff</div>
</dd>
</div>
<div class="pf-v5-c-description-list__group">
<dt class="pf-v5-c-description-list__term">Node</dt>
<dd class="pf-v5-c-description-list__description">
<div class="pf-v5-c-description-list__text">
<div class="pf-v5-l-flex pf-m-space-items-sm">
<div class="pf-v5-l-flex__item">
<span class="pf-v5-c-label pf-m-purple">
<span class="pf-v5-c-label__content">
<span class="pf-v5-c-label__text">N</span>
</span>
</span>
</div>
<div
class="pf-v5-l-flex__item"
>ip-10-0-233-118.us-east-2.computer.external</div>
</div>
</div>
</dd>
</div>
<div class="pf-v5-c-description-list__group">
<dt class="pf-v5-c-description-list__term">Created at</dt>
<dd class="pf-v5-c-description-list__description">
<div class="pf-v5-c-description-list__text">
<time>Oct 15, 1:51 pm</time>
</div>
</dd>
</div>
</dl>
</div>
</div>
</div>
</section>
<section
class="pf-v5-c-tab-content"
aria-labelledby="tabs-tables-and-tabs-example-tabs-yaml-link"
id="tabs-tables-and-tabs-example-tabs-yaml-panel"
role="tabpanel"
tabindex="0"
hidden
>
<div class="pf-v5-c-tab-content__body">YAML panel</div>
</section>
<section
class="pf-v5-c-tab-content"
aria-labelledby="tabs-tables-and-tabs-example-tabs-environment-link"
id="tabs-tables-and-tabs-example-tabs-environment-panel"
role="tabpanel"
tabindex="0"
hidden
>
<div class="pf-v5-c-tab-content__body">Environment panel</div>
</section>
<section
class="pf-v5-c-tab-content"
aria-labelledby="tabs-tables-and-tabs-example-tabs-logs-link"
id="tabs-tables-and-tabs-example-tabs-logs-panel"
role="tabpanel"
tabindex="0"
hidden
>
<div class="pf-v5-c-tab-content__body">Logs panel</div>
</section>
<section
class="pf-v5-c-tab-content"
aria-labelledby="tabs-tables-and-tabs-example-tabs-events-link"
id="tabs-tables-and-tabs-example-tabs-events-panel"
role="tabpanel"
tabindex="0"
hidden
>
<div class="pf-v5-c-tab-content__body">Events panel</div>
</section>
<section
class="pf-v5-c-tab-content"
aria-labelledby="tabs-tables-and-tabs-example-tabs-terminal-link"
id="tabs-tables-and-tabs-example-tabs-terminal-panel"
role="tabpanel"
tabindex="0"
hidden
>
<div class="pf-v5-c-tab-content__body">Terminal panel</div>
</section>
</div>
</section>
</main>
</div>
```
### Open tabs with secondary tabs
```html isFullscreen
<div class="pf-v5-c-page" id="tabs-tables-and-tabs-example">
<div class="pf-v5-c-skip-to-content">
<a
class="pf-v5-c-button pf-m-primary"
href="#main-content-tabs-tables-and-tabs-example"
>Skip to content</a>
</div>
<header class="pf-v5-c-masthead" id="tabs-tables-and-tabs-example-masthead">
<span class="pf-v5-c-masthead__toggle">
<button
class="pf-v5-c-button pf-m-plain"
type="button"
aria-label="Global navigation"
>
<i class="fas fa-bars" aria-hidden="true"></i>
</button>
</span>
<div class="pf-v5-c-masthead__main">
<a class="pf-v5-c-masthead__brand" href="#">
<img
class="pf-v5-c-brand"
src="/assets/images/pf-logo.svg"
alt="PatternFly logo"
style="--pf-v5-c-brand--Height:36px"
/>
</a>
</div>
<div class="pf-v5-c-masthead__content">
<div
class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
id="tabs-tables-and-tabs-example-masthead-toolbar"
>
<div class="pf-v5-c-toolbar__content">
<div class="pf-v5-c-toolbar__content-section">
<div
class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
>
<div
class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
>
<div class="pf-v5-c-toolbar__item">
<button
class="pf-v5-c-menu-toggle pf-m-plain"
type="button"
aria-expanded="false"
aria-label="Application launcher"
>
<i class="fas fa-th" aria-hidden="true"></i>
</button>
</div>
<div class="pf-v5-c-toolbar__item">
<button
class="pf-v5-c-menu-toggle pf-m-plain"
type="button"
aria-expanded="false"
aria-label="Settings"
>
<i class="fas fa-cog" aria-hidden="true"></i>
</button>
</div>
<div class="pf-v5-c-toolbar__item">
<button
class="pf-v5-c-menu-toggle pf-m-plain"
type="button"
aria-expanded="false"
aria-label="Help"
>
<i class="fas fa-question-circle" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
<button
class="pf-v5-c-menu-toggle pf-m-plain"
type="button"
aria-expanded="false"
aria-label="Actions"
>
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
<button
class="pf-v5-c-menu-toggle pf-m-full-height"
type="button"
aria-expanded="false"
>
<span class="pf-v5-c-menu-toggle__icon">
<img
class="pf-v5-c-avatar"
alt="Avatar image"
src="/assets/images/img_avatar-light.svg"
/>
</span>
<span class="pf-v5-c-menu-toggle__text">Ned Username</span>
<span class="pf-v5-c-menu-toggle__controls">
<span class="pf-v5-c-menu-toggle__toggle-icon">
<i class="fas fa-caret-down" aria-hidden="true"></i>
</span>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="pf-v5-c-page__sidebar">
<div class="pf-v5-c-page__sidebar-body">
<nav
class="pf-v5-c-nav"
id="tabs-tables-and-tabs-example-primary-nav"
aria-label="Global"
>
<ul class="pf-v5-c-nav__list" role="list">
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">System panel</a>
</li>
<li class="pf-v5-c-nav__item">
<a
href="#"
class="pf-v5-c-nav__link pf-m-current"
aria-current="page"
>Policy</a>
</li>
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Authentication</a>
</li>
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Network services</a>
</li>
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Server</a>
</li>
</ul>
</nav>
</div>
</div>
<main
class="pf-v5-c-page__main"
tabindex="-1"
id="main-content-tabs-tables-and-tabs-example"
>
<section class="pf-v5-c-page__main-breadcrumb pf-m-limit-width">
<div class="pf-v5-c-page__main-body">
<nav class="pf-v5-c-breadcrumb" aria-label="breadcrumb">
<ol class="pf-v5-c-breadcrumb__list" role="list">
<li class="pf-v5-c-breadcrumb__item">
<a href="#" class="pf-v5-c-breadcrumb__link">Section home</a>
</li>
<li class="pf-v5-c-breadcrumb__item">
<span class="pf-v5-c-breadcrumb__item-divider">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
</li>
<li class="pf-v5-c-breadcrumb__item">
<span class="pf-v5-c-breadcrumb__item-divider">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
</li>
<li class="pf-v5-c-breadcrumb__item">
<span class="pf-v5-c-breadcrumb__item-divider">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<a
href="#"
class="pf-v5-c-breadcrumb__link pf-m-current"
aria-current="page"
>Section landing</a>
</li>
</ol>
</nav>
</div>
</section>
<section class="pf-v5-c-page__main-section pf-m-limit-width pf-m-light">
<div class="pf-v5-c-page__main-body">
<div class="pf-v5-c-content">
<h1>Main title</h1>
<p>This is a full page demo.</p>
</div>
</div>
</section>
<section class="pf-v5-c-page__main-tabs pf-m-limit-width">
<div class="pf-v5-c-page__main-body">
<div
class="pf-v5-c-tabs pf-m-page-insets"
role="region"
id="tabs-tables-and-tabs-example-tabs"
>
<ul class="pf-v5-c-tabs__list" role="tablist">
<li class="pf-v5-c-tabs__item pf-m-current" role="presentation">
<button
type="button"
class="pf-v5-c-tabs__link"
role="tab"
aria-controls="tabs-tables-and-tabs-example-tabs-details-panel"
id="tabs-tables-and-tabs-example-tabs-details-link"
>
<span class="pf-v5-c-tabs__item-text">Details</span>
</button>
</li>
<li class="pf-v5-c-tabs__item" role="presentation">
<button
type="button"
class="pf-v5-c-tabs__link"
role="tab"
aria-controls="tabs-tables-and-tabs-example-tabs-yaml-panel"
id="tabs-tables-and-tabs-example-tabs-yaml-link"
>
<span class="pf-v5-c-tabs__item-text">YAML</span>
</button>
</li>
<li class="pf-v5-c-tabs__item" role="presentation">
<button
type="button"
class="pf-v5-c-tabs__link"
role="tab"
aria-controls="tabs-tables-and-tabs-example-tabs-environment-panel"
id="tabs-tables-and-tabs-example-tabs-environment-link"
>
<span class="pf-v5-c-tabs__item-text">Environment</span>
</button>
</li>
<li class="pf-v5-c-tabs__item" role="presentation">
<button
type="button"
class="pf-v5-c-tabs__link"
role="tab"
aria-controls="tabs-tables-and-tabs-example-tabs-logs-panel"
id="tabs-tables-and-tabs-example-tabs-logs-link"
>
<span class="pf-v5-c-tabs__item-text">Logs</span>
</button>
</li>
<li class="pf-v5-c-tabs__item" role="presentation">
<button
type="button"
class="pf-v5-c-tabs__link"
role="tab"
aria-controls="tabs-tables-and-tabs-example-tabs-events-panel"
id="tabs-tables-and-tabs-example-tabs-events-link"
>
<span class="pf-v5-c-tabs__item-text">Events</span>
</button>
</li>
<li class="pf-v5-c-tabs__item" role="presentation">
<button
type="button"
class="pf-v5-c-tabs__link"
role="tab"
aria-controls="tabs-tables-and-tabs-example-tabs-terminal-panel"
id="tabs-tables-and-tabs-example-tabs-terminal-link"
>
<span class="pf-v5-c-tabs__item-text">Terminal</span>
</button>
</li>
</ul>
</div>
</div>
</section>
<section
class="pf-v5-c-page__main-section pf-m-limit-width pf-m-light pf-m-no-padding"
>
<div class="pf-v5-c-page__main-body">
<div
class="pf-v5-c-tabs pf-m-secondary pf-m-page-insets"
role="region"
id="tabs-tables-and-tabs-example-tabs-secondary"
>
<ul class="pf-v5-c-tabs__list" role="tablist">
<li class="pf-v5-c-tabs__item pf-m-current" role="presentation">
<button
type="button"
class="pf-v5-c-tabs__link"
role="tab"
aria-controls="tabs-tables-and-tabs-example-tabs-secondary-pod-info-panel"
id="tabs-tables-and-tabs-example-tabs-secondary-pod-info-link"
>
<span class="pf-v5-c-tabs__item-text">Pod information</span>
</button>
</li>
<li class="pf-v5-c-tabs__item" role="presentation">
<button
type="button"
class="pf-v5-c-tabs__link"
role="tab"
aria-controls="tabs-tables-and-tabs-example-tabs-secondary-editable-aspects-panel"
id="tabs-tables-and-tabs-example-tabs-secondary-editable-aspects-link"
>
<span class="pf-v5-c-tabs__item-text">Editable Aspects</span>
</button>
</li>
</ul>
</div>
<section
class="pf-v5-c-tab-content"
aria-labelledby="tabs-tables-and-tabs-example-tabs-details-link"
id="tabs-tables-and-tabs-example-tabs-details-panel"
role="tabpanel"
tabindex="0"
>
<div class="pf-v5-c-tab-content__body pf-m-padding">
<section
class="pf-v5-c-tab-content"
aria-labelledby="tabs-tables-and-tabs-example-tabs-secondary-pod-info-link"
id="tabs-tables-and-tabs-example-tabs-secondary-pod-info-panel"
role="tabpanel"
tabindex="0"
>
<div class="pf-v5-c-tab-content__body">
<div class="pf-v5-l-flex pf-m-column">
<div class="pf-v5-l-flex__item">
<dl
class="pf-v5-c-description-list pf-m-2-col-on-lg"
aria-label="Pod information list"
>
<div class="pf-v5-c-description-list__group">
<dt class="pf-v5-c-description-list__term">Name</dt>
<dd class="pf-v5-c-description-list__description">
<div
class="pf-v5-c-description-list__text"
>3scale-control-fccb6ddb9-phyqv9</div>
</dd>
</div>
<div class="pf-v5-c-description-list__group">
<dt class="pf-v5-c-description-list__term">Status</dt>
<dd class="pf-v5-c-description-list__description">
<div class="pf-v5-c-description-list__text">
<div class="pf-v5-l-flex pf-m-space-items-sm">
<div class="pf-v5-l-flex__item">
<i
class="fas fa-fw fa-check-circle"
aria-hidden="true"
></i>
</div>
<div class="pf-v5-l-flex__item">Running</div>
</div>
</div>
</dd>
</div>
<div class="pf-v5-c-description-list__group">
<dt class="pf-v5-c-description-list__term">Namespace</dt>
<dd class="pf-v5-c-description-list__description">
<div class="pf-v5-c-description-list__text">
<div class="pf-v5-l-flex pf-m-space-items-sm">
<div class="pf-v5-l-flex__item">
<span class="pf-v5-c-label pf-m-cyan">
<span class="pf-v5-c-label__content">
<span class="pf-v5-c-label__text">NS</span>
</span>
</span>
</div>
<div class="pf-v5-l-flex__item">
<a href="#">knative-serving-ingress</a>
</div>
</div>
</div>
</dd>
</div>
<div class="pf-v5-c-description-list__group">
<dt
class="pf-v5-c-description-list__term"
>Restart policy</dt>
<dd class="pf-v5-c-description-list__description">
<div
class="pf-v5-c-description-list__text"
>Always restart</div>
</dd>
</div>
<div class="pf-v5-c-description-list__group">
<dt class="pf-v5-c-description-list__term">Pod IP</dt>
<dd class="pf-v5-c-description-list__description">
<div
class="pf-v5-c-description-list__text"
>10.345.2.197</div>
</dd>
</div>
<div class="pf-v5-c-description-list__group">
<dt
class="pf-v5-c-description-list__term"
>Active deadline seconds</dt>
<dd class="pf-v5-c-description-list__description">
<div
class="pf-v5-c-description-list__text"
>Not configured</div>
</dd>
</div>
<div class="pf-v5-c-description-list__group">
<dt class="pf-v5-c-description-list__term">Created at</dt>
<dd class="pf-v5-c-description-list__description">
<div class="pf-v5-c-description-list__text">
<time>Oct 15, 1:51 pm</time>
</div>
</dd>
</div>
<div class="pf-v5-c-description-list__group">
<dt class="pf-v5-c-description-list__term">Node</dt>
<dd class="pf-v5-c-description-list__description">
<div class="pf-v5-c-description-list__text">
<div class="pf-v5-l-flex pf-m-space-items-sm">
<div class="pf-v5-l-flex__item">
<span class="pf-v5-c-label pf-m-purple">
<span class="pf-v5-c-label__content">
<span class="pf-v5-c-label__text">N</span>
</span>
</span>
</div>
<div
class="pf-v5-l-flex__item"
>ip-10-0-233-118.us-east-2.computer.external</div>
</div>
</div>
</dd>
</div>
</dl>
</div>
</div>
</div>
</section>
<section
class="pf-v5-c-tab-content"
aria-labelledby="tabs-tables-and-tabs-example-tabs-secondary-editable-aspects-link"
id="tabs-tables-and-tabs-example-tabs-secondary-editable-aspects-panel"
role="tabpanel"
tabindex="0"
hidden
>
<div class="pf-v5-c-tab-content__body">Editable aspects panel</div>
</section>
</div>
</section>
<section
class="pf-v5-c-tab-content"
aria-labelledby="tabs-tables-and-tabs-example-tabs-yaml-link"
id="tabs-tables-and-tabs-example-tabs-yaml-panel"
role="tabpanel"
tabindex="0"
hidden
>
<div class="pf-v5-c-tab-content__body pf-m-padding">YAML panel</div>
</section>
<section
class="pf-v5-c-tab-content"
aria-labelledby="tabs-tables-and-tabs-example-tabs-environment-link"
id="tabs-tables-and-tabs-example-tabs-environment-panel"
role="tabpanel"
tabindex="0"
hidden
>
<div class="pf-v5-c-tab-content__body pf-m-padding">Environment panel</div>
</section>
<section
class="pf-v5-c-tab-content"
aria-labelledby="tabs-tables-and-tabs-example-tabs-logs-link"
id="tabs-tables-and-tabs-example-tabs-logs-panel"
role="tabpanel"
tabindex="0"
hidden
>
<div class="pf-v5-c-tab-content__body pf-m-padding">Logs panel</div>
</section>
<section
class="pf-v5-c-tab-content"
aria-labelledby="tabs-tables-and-tabs-example-tabs-events-link"
id="tabs-tables-and-tabs-example-tabs-events-panel"
role="tabpanel"
tabindex="0"
hidden
>
<div class="pf-v5-c-tab-content__body pf-m-padding">Events panel</div>
</section>
<section
class="pf-v5-c-tab-content"
aria-labelledby="tabs-tables-and-tabs-example-tabs-terminal-link"
id="tabs-tables-and-tabs-example-tabs-terminal-panel"
role="tabpanel"
tabindex="0"
hidden
>
<div class="pf-v5-c-tab-content__body pf-m-padding">Terminal panel</div>
</section>
</div>
</section>
</main>
</div>
```
### Nested tabs
```html isFullscreen
<div class="pf-v5-c-page" id="nested-tabs-example">
<div class="pf-v5-c-skip-to-content">
<a
class="pf-v5-c-button pf-m-primary"
href="#main-content-nested-tabs-example"
>Skip to content</a>
</div>
<header class="pf-v5-c-masthead" id="nested-tabs-example-masthead">
<span class="pf-v5-c-masthead__toggle">
<button
class="pf-v5-c-button pf-m-plain"
type="button"
aria-label="Global navigation"
>
<i class="fas fa-bars" aria-hidden="true"></i>
</button>
</span>
<div class="pf-v5-c-masthead__main">
<a class="pf-v5-c-masthead__brand" href="#">
<img
class="pf-v5-c-brand"
src="/assets/images/pf-logo.svg"
alt="PatternFly logo"
style="--pf-v5-c-brand--Height:36px"
/>
</a>
</div>
<div class="pf-v5-c-masthead__content">
<div
class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
id="nested-tabs-example-masthead-toolbar"
>
<div class="pf-v5-c-toolbar__content">
<div class="pf-v5-c-toolbar__content-section">
<div
class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
>
<div
class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
>
<div class="pf-v5-c-toolbar__item">
<button
class="pf-v5-c-menu-toggle pf-m-plain"
type="button"
aria-expanded="false"
aria-label="Application launcher"
>
<i class="fas fa-th" aria-hidden="true"></i>
</button>
</div>
<div class="pf-v5-c-toolbar__item">
<button
class="pf-v5-c-menu-toggle pf-m-plain"
type="button"
aria-expanded="false"
aria-label="Settings"
>
<i class="fas fa-cog" aria-hidden="true"></i>
</button>
</div>
<div class="pf-v5-c-toolbar__item">
<button
class="pf-v5-c-menu-toggle pf-m-plain"
type="button"
aria-expanded="false"
aria-label="Help"
>
<i class="fas fa-question-circle" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
<button
class="pf-v5-c-menu-toggle pf-m-plain"
type="button"
aria-expanded="false"
aria-label="Actions"
>
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
<button
class="pf-v5-c-menu-toggle pf-m-full-height"
type="button"
aria-expanded="false"
>
<span class="pf-v5-c-menu-toggle__icon">
<img
class="pf-v5-c-avatar"
alt="Avatar image"
src="/assets/images/img_avatar-light.svg"
/>
</span>
<span class="pf-v5-c-menu-toggle__text">Ned Username</span>
<span class="pf-v5-c-menu-toggle__controls">
<span class="pf-v5-c-menu-toggle__toggle-icon">
<i class="fas fa-caret-down" aria-hidden="true"></i>
</span>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="pf-v5-c-page__sidebar">
<div class="pf-v5-c-page__sidebar-body">
<nav
class="pf-v5-c-nav"
id="nested-tabs-example-primary-nav"
aria-label="Global"
>
<ul class="pf-v5-c-nav__list" role="list">
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">System panel</a>
</li>
<li class="pf-v5-c-nav__item">
<a
href="#"
class="pf-v5-c-nav__link pf-m-current"
aria-current="page"
>Policy</a>
</li>
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Authentication</a>
</li>
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Network services</a>
</li>
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Server</a>
</li>
</ul>
</nav>
</div>
</div>
<main
class="pf-v5-c-page__main"
tabindex="-1"
id="main-content-nested-tabs-example"
>
<section class="pf-v5-c-page__main-breadcrumb pf-m-limit-width">
<div class="pf-v5-c-page__main-body">
<nav class="pf-v5-c-breadcrumb" aria-label="breadcrumb">
<ol class="pf-v5-c-breadcrumb__list" role="list">
<li class="pf-v5-c-breadcrumb__item">
<a href="#" class="pf-v5-c-breadcrumb__link">Section home</a>
</li>
<li class="pf-v5-c-breadcrumb__item">
<span class="pf-v5-c-breadcrumb__item-divider">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
</li>
<li class="pf-v5-c-breadcrumb__item">
<span class="pf-v5-c-breadcrumb__item-divider">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
</li>
<li class="pf-v5-c-breadcrumb__item">
<span class="pf-v5-c-breadcrumb__item-divider">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<a
href="#"
class="pf-v5-c-breadcrumb__link pf-m-current"
aria-current="page"
>Section landing</a>
</li>
</ol>
</nav>
</div>
</section>
<section class="pf-v5-c-page__main-section pf-m-limit-width pf-m-light">
<div class="pf-v5-c-page__main-body">
<div class="pf-v5-c-content">
<h1>Main title</h1>
<p>This is a full page demo.</p>
</div>
</div>
</section>
<section class="pf-v5-c-page__main-tabs pf-m-limit-width">
<div class="pf-v5-c-page__main-body">
<div
class="pf-v5-c-tabs pf-m-page-insets"
role="region"
id="nested-tabs-example-tabs-tabs"
>
<ul class="pf-v5-c-tabs__list" role="tablist">
<li class="pf-v5-c-tabs__item pf-m-current" role="presentation">
<button
type="button"
class="pf-v5-c-tabs__link"
role="tab"
aria-controls="nested-tabs-example-tabs-tabs-cluster-1-panel"
id="nested-tabs-example-tabs-tabs-cluster-1-link"
>
<span class="pf-v5-c-tabs__item-text">Cluster 1</span>
</button>
</li>
<li class="pf-v5-c-tabs__item" role="presentation">
<button
type="button"
class="pf-v5-c-tabs__link"
role="tab"
aria-controls="nested-tabs-example-tabs-tabs-cluster-2-panel"
id="nested-tabs-example-tabs-tabs-cluster-2-link"
>
<span class="pf-v5-c-tabs__item-text">Cluster 2</span>
</button>
</li>
</ul>
</div>
</div>
</section>
<section class="pf-v5-c-page__main-section pf-m-limit-width">
<div class="pf-v5-c-page__main-body">
<section
class="pf-v5-c-tab-content"
aria-labelledby="nested-tabs-example-tabs-tabs-cluster-1-link"
id="nested-tabs-example-tabs-tabs-cluster-1-panel"
role="tabpanel"
tabindex="0"
>
<div class="pf-v5-c-tab-content__body">
<div class="pf-v5-l-grid pf-m-gutter">
<div class="pf-v5-l-grid__item pf-m-6-col-on-md pf-m-8-col-on-xl">
<div class="pf-v5-c-card pf-m-full-height">
<div class="pf-v5-c-card__header">
<h2 class="pf-v5-c-title pf-m-lg">Status</h2>
</div>
<div class="pf-v5-c-card__body">
<div class="pf-v5-l-flex pf-m-column">
<div class="pf-v5-l-flex__item">
<div
class="pf-v5-c-tabs pf-m-secondary"
role="region"
id="nested-tabs-example-tabs-tabs-subtabs"
>
<ul class="pf-v5-c-tabs__list" role="tablist">
<li
class="pf-v5-c-tabs__item pf-m-current"
role="presentation"
>
<button