--- id: Tabs section: components cssPrefix: pf-c-tabs ---import './Tabs.css' ## Examples ### Default ```html
``` ### Accessibility | Attribute | Applied to | Outcome | | ---------------------- | ------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------ | | `disabled` | `button.pf-c-tabs__link` | Indicates that a tabs link is disabled. **Required when disabled** | | `aria-disabled="true"` | `a.pf-c-tabs__link.pf-m-disabled`, `.pf-c-tabs__link.pf-m-aria-disabled` | Indicates to assistive technology that a tabs link is disabled. **Required when disabled** | ### Usage | Class | Applied to | Outcome | | --------------------- | ------------------- | --------------------------------------------------------------------------- | | `.pf-m-disabled` | `a.pf-c-tabs__link` | Modifies a tabs link for disabled styles. | | `.pf-m-aria-disabled` | `.pf-c-tabs__link` | Modifies a tabs link for disabled styles, but is still hoverable/focusable. | ### Default overflow beginning of list ```html
``` ### Accessibility | Attribute | Applied to | Outcome | | -------------------- | --------------------------- | ---------------------------------------------------------------------------------------------------------------- | | `disabled` | `.pf-c-tabs__scroll-button` | Indicates that a scroll button is disabled, when at the first or last item of a list. **Required when disabled** | | `aria-hidden="true"` | `.pf-c-tabs__scroll-button` | Hides the icon from assistive technologies.**Required when not scrollable** | ### Usage | Class | Applied to | Outcome | | --------------------------- | ------------ | ----------------------------------------- | | `.pf-m-scrollable` | `.pf-c-tabs` | Enables the directional scroll buttons. | | `.pf-c-tabs__scroll-button` | `
    • ``` ### Box ```html
    ``` ### Box overflow ```html
    ``` ### Box vertical ```html
    ``` ### Box tabs color scheme light 300 ```html
    ``` ### Inset ```html
    ``` ### Inset box ```html
    ``` ### Page insets ```html
    ``` ### Usage | Class | Applied to | Outcome | | ------------------------------------------------------------------------- | ------------ | ------------------------------------------------------------------------------------------------- | | `.pf-m-inset-{none, sm, md, lg, xl, 2xl, 3xl}{-on-[sm, md, lg, xl, 2xl]}` | `.pf-c-tabs` | Modifies the tabs component padding/inset to visually match padding of other adjacent components. | | `.pf-m-page-insets` | `.pf-c-tabs` | Modifies the tabs component padding/inset to visually match padding of page elements. | ### Icons and text ```html
    ``` ### Tabs with sub tabs ```html
    ``` ### Box tabs with sub tabs ```html
    ``` ### Filled ```html
    ``` ### Filled with icons ```html
    ``` ### Filled box ```html
    ``` ### Filled box with icons ```html
    ``` ## Usage | Class | Applied to | Outcome | | ------------ | ------------ | ----------------------------------------------------------- | | `.pf-m-fill` | `.pf-c-tabs` | Modifies the tabs to fill the available space. **Required** | ### Using the nav element ```html ``` ### Sub nav using the nav element ```html ``` ### Vertical expandable ```html
    ``` ### Vertical expanded ```html
    ``` ### Vertical expandable (responsive) ```html
    ``` ### Vertical expandable (legacy) ```html
    Containers
    ``` ### Vertical expanded (legacy) ```html
    Containers
    ``` ### Vertical expandable (responsive, legacy) ```html
    Containers
    ``` 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 `