--- id: Tabs section: components cssPrefix: pf-v5-c-tabs ---import './Tabs.css' # Examples ## Default ### Default tabs example ```html
``` ### Default tabs usage | Class | Applied to | Outcome | | -- | -- | -- | | `.pf-m-disabled` | `a.pf-v5-c-tabs__link` | Modifies a tabs link for disabled styles. | | `.pf-m-aria-disabled` | `.pf-v5-c-tabs__link` | Modifies a tabs link for disabled styles, but is still hoverable/focusable. | ## Overflow ### Overflow beginning of list example ```html
``` ### Overflow beginning of list usage | Class | Applied to | Outcome | | -- | -- | -- | | `.pf-m-scrollable` | `.pf-v5-c-tabs` | Enables the directional scroll buttons. | | `.pf-v5-c-tabs__scroll-button` | ` ``` ### Horizontal overflow expanded example ```html
``` ### Horizontal overflow selected example ```html
``` ## Vertical ### Vertical tabs example ```html
``` ### Vertical expandable example ```html
``` ### Vertical expanded example ```html
``` ### Vertical expandable responsive example ```html
``` ### Vertical expandable example (deprecated) ```html isDeprecated
Containers
``` ### Vertical expanded example (deprecated) ```html isDeprecated
Containers
``` ### Vertical expandable responsive example (deprecated) ```html isDeprecated
Containers
``` ## Box ### Box tabs example ```html
``` ### Box overflow example ```html
``` ### Box vertical example ```html
``` ### Box tabs color scheme light 300 example ```html
``` ## Tab insets ### Default tab insets example ```html
``` ### Box tab insets example ```html
``` ### Page insets example ```html
``` ### Insets usage | Class | Applied to | Outcome | | -- | -- | -- | | `.pf-m-inset-{none, sm, md, lg, xl, 2xl, 3xl}{-on-[sm, md, lg, xl, 2xl]}` | `.pf-v5-c-tabs` | Modifies the tabs component padding/inset to visually match padding of other adjacent components. | | `.pf-m-page-insets` | `.pf-v5-c-tabs` | Modifies the tabs component padding/inset to visually match padding of page elements. | ## Icons ### Icons and text example ```html
``` ## Sub tabs ### Tabs with sub tabs example ```html
``` ### Box tabs with sub tabs example ```html
``` ## Filled ### Filled tabs example ```html
``` ### Filled with icons example ```html
``` ### Filled box example ```html
``` ### Filled box with icons example ```html
``` ### Filled usage | Class | Applied to | Outcome | | -- | -- | -- | | `.pf-m-fill` | `.pf-v5-c-tabs` | Modifies the tabs to fill the available space. **Required** | ## Tabs as navigation ### Using the nav element example ```html ``` ### Sub tabs using the nav element example ```html ``` ## Tab item actions ### Help button example ```html










``` ### Close button example ```html










``` ### Help and close button example ```html










``` ## Add tab button ### Add tab button example ```html




``` ## Documentation ### 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. Tabs should be used with the [tab content component](/components/tab-content). Whenever a list of tabs is unique on the current page, it can be used in a `