--- id: Tabs section: components cssPrefix: pf-v6-c-tabs ---# Examples ## Default ### Default tabs example ```html
``` ### 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
``` ### 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` | `
` | Initiates a tabs component scroll button container. | ### Horizontal overflow example ```html
``` ### 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 secondary variant 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-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 ```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-v6-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




``` ## Animate current tab accent To animate the current tab accent, you must set the following variables on the `.pf-v6-c-tabs` wrapper. As tabs are added, removed, and resized, these values may need to be updated dynamically. The following examples use static values for these variables and are not updated dynamically, so there may be styling issues. For more functional examples, see the [react tabs component examples](/components/tabs). * `--pf-v6-c-tabs--link-accent--start` - the left offset of the current tab * `--pf-v6-c-tabs--link-accent--length` - the width of the current tab ### Animate default tabs accent ```html
``` ### Animate sub tabs accent ```html
``` ### Animate filled tabs accent ```html
``` ### Animate vertical tabs accent ```html
``` ## Tab content ### Default tab content example ```html
Panel 1
``` ### Padding ```html
Panel 1
``` ### Secondary ```html
Panel 1
``` ## 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 `