Tabs

OverviewStyleGuidelinesCodeAccessibilityDemos

Installation

We recommend import maps when building pages with RHDS. Learn more about how to install on our getting started docs.

Red Hat CDN
<script type="importmap">
{
  "imports": {
    "@rhds/elements/": "https://www.redhatstatic.com/dx/v1-alpha/@rhds/elements@2.1.2/elements/",
  }
}
</script>
Copy to Clipboard Wrap lines
NPM
npm install @rhds/elements
Copy to Clipboard Wrap lines
JSPM
<script type="importmap">
Could not generate import map using JSPM: Cannot read properties of undefined (reading '@rhds/elements')
</script>
Copy to Clipboard Wrap lines

Add it to your page with this import statement

<script type="module">
  import '@rhds/elements/rh-tabs/rh-tabs.js';
</script>
Copy to Clipboard Wrap lines

Usage

<rh-tabs>
  <rh-tab id="users" slot="tab">Users</rh-tab>
  <rh-tab-panel>Users</rh-tab-panel>
  <rh-tab slot="tab">Containers</rh-tab>
  <rh-tab-panel>Containers <a href="#">Focusable element</a></rh-tab-panel>
  <rh-tab slot="tab">Database</rh-tab>
  <rh-tab-panel>Database</rh-tab-panel>
  <rh-tab slot="tab">Servers</rh-tab>
  <rh-tab-panel>Servers</rh-tab-panel>
  <rh-tab slot="tab">Cloud</rh-tab>
  <rh-tab-panel>Cloud</rh-tab-panel>
</rh-tabs>

<script type="module">
  import '@rhds/elements/rh-tabs/rh-tabs.js';
</script>

<style>
  a {
    color: var(--rh-color-interactive-primary-default);
    &:hover { color: var(--rh-color-interactive-primary-hover); }
    &:focus-within { color: var(--rh-color-interactive-primary-focus); }
    &:active { color: var(--rh-color-interactive-primary-active); }
    &:visited {
      color: var(--rh-color-interactive-primary-visited);
      &:hover { color: var(--rh-color-interactive-primary-visited-hover); }
      &:focus-within { color: var(--rh-color-interactive-primary-visited-focus); }
      &:active { color: var(--rh-color-interactive-primary-visited-active); }
    }
  }
</style>
Copy to Clipboard Wrap lines

rh-tabs

Tabs are used to organize and navigate between sections of content. They feature a horizontal or a vertical list of section text labels with a content panel below or to the right of the component.

Slots 2
Slot Name Description
tab

Must contain one or more <rh-tab>

Must contain one or more <rh-tab-panel>

Attributes 8
Attribute DOM Property Description Type Default
label-scroll-left labelScrollLeft

Label for the scroll left button

string
'Scroll left'
label-scroll-right labelScrollRight

Label for the scroll right button

string
'Scroll right'
manual manual

Tabs can be either automatic activated or manual

boolean
false
active-index activeIndex

Index of the active tab

unknown
unknown
color-palette colorPalette

Sets color context for child components, overrides parent context

ColorPalette | undefined
unknown
centered centered

Aligns tabs to the center

boolean
false
box box

Sets tabs to a boxed style with or without an inset

'box' | 'inset' | undefined
unknown
vertical vertical

Sets the alignment of the tabs vertical

boolean
false
Methods 1
Method Name Description
select(option: RhTab | number)
Events 0
None
CSS Shadow Parts 4
Part Name Description
container

outer container

tabs-container

tabs container

tabs

tablist

panels

panels

CSS Custom Properties 2
CSS Property Description Default
--rh-tabs-border-color

Tabs Border color

#c7c7c7
--rh-tabs-inset

Tabs inset

auto
Design Tokens 14
Token Copy
--rh-border-width-lg
Full CSS Variable Permalink to this token
--rh-border-width-sm
Full CSS Variable Permalink to this token
--rh-color-accent-base
Full CSS Variable Permalink to this token
--rh-color-border-subtle
Full CSS Variable Permalink to this token
--rh-color-gray-40
Full CSS Variable Permalink to this token
--rh-color-gray-50
Full CSS Variable Permalink to this token
--rh-color-surface
Full CSS Variable Permalink to this token
--rh-color-text-primary
Full CSS Variable Permalink to this token
--rh-color-text-secondary
Full CSS Variable Permalink to this token
--rh-font-size-body-text-md
Full CSS Variable Permalink to this token
--rh-space-2xl
Full CSS Variable Permalink to this token
--rh-space-3xl
Full CSS Variable Permalink to this token
--rh-space-4xl
Full CSS Variable Permalink to this token
--rh-space-lg
Full CSS Variable Permalink to this token

rh-tab-panel

The tab panel for use within a rh-tabs element, must be paired with a rh-tab.

Slots 1
Slot Name Description

Panel content should follow guidelines for tab panel content layout

Attributes 0
None
Methods 0
None
Events 0
None
CSS Shadow Parts 0
None
CSS Custom Properties 0
None
Design Tokens 1
Token Copy
--rh-space-2xl
Full CSS Variable Permalink to this token

rh-tab

The tab button for use within a rh-tabs element, must be paired with a rh-tab-panel.

Slots 2
Slot Name Description
icon

Can contain an <svg> or <rh-icon>

Tab title text

Attributes 2
Attribute DOM Property Description Type Default
active active

True when the tab is selected

boolean
false
disabled disabled

True when the tab is disabled

boolean
false
Methods 0
None
Events 1
Event Name Description
expand

when a tab expands

CSS Shadow Parts 3
Part Name Description
button

element that contains the interactive part of a tab

icon

icon <span> element

text

tile text <span> element

CSS Custom Properties 6
CSS Property Description Default
--rh-tabs-link-color

Tab link text color

#4d4d4d
--rh-tabs-active-border-color

Tab active border color

#ff442b
--rh-tabs-link-padding-inline-start

Tab padding inline start

32px
--rh-tabs-link-padding-block-start

Tab padding block start

16px
--rh-tabs-link-padding-inline-end

Tab padding inline end

32px`
--rh-tabs-link-padding-block-end

Tab padding block end

16px
Design Tokens 16
Token Copy
--rh-border-width-lg
Full CSS Variable Permalink to this token
--rh-border-width-sm
Full CSS Variable Permalink to this token
--rh-color-accent-brand
Full CSS Variable Permalink to this token
--rh-color-border-interactive
Full CSS Variable Permalink to this token
--rh-color-interactive-primary-default
Full CSS Variable Permalink to this token
--rh-color-interactive-secondary-default
Full CSS Variable Permalink to this token
--rh-color-surface
Full CSS Variable Permalink to this token
--rh-color-surface-dark-alt
Full CSS Variable Permalink to this token
--rh-color-surface-lighter
Full CSS Variable Permalink to this token
--rh-color-text-primary
Full CSS Variable Permalink to this token
--rh-color-text-secondary
Full CSS Variable Permalink to this token
--rh-line-height-heading
Full CSS Variable Permalink to this token
--rh-space-2xl
Full CSS Variable Permalink to this token
--rh-space-lg
Full CSS Variable Permalink to this token
--rh-space-md
Full CSS Variable Permalink to this token
--rh-space-xl
Full CSS Variable Permalink to this token