/

<Tabs> Component

General purpose tabs component. Used heavily across all websites, but especially heavily on Learn.

Share
Code Editor
<Tabs>

  <Tab heading="First Tab">

    <p>First tab content</p>

  </Tab>

  <Tab heading="Second Tab">

    <p>Second tab content</p>

  </Tab>

  <Tab heading="Third Tab">

    <p>Third tab content</p>

  </Tab>

</Tabs>

Where it's used

Latest:7.2.1
Search with

Releases

Latest:7.2.1
registry.npmjs.org
0.x.x
Loading 0.x.x releases...
1.x.x
Loading 1.x.x releases...
2.x.x
Loading 2.x.x releases...
3.x.x
Loading 3.x.x releases...
4.x.x
Loading 4.x.x releases...
5.x.x
Loading 5.x.x releases...
6.x.x
Loading 6.x.x releases...
7.x.x
Loading 7.x.x releases...

Props

NameDescription
defaultTabIdx
integer
If set, the tab with the specified ID will be active by default. If not set or if the ID does not match, it will default to 0
centered
boolean
If true, the tabs are centered in their container, rather than left-aligned
fullWidthBorder
boolean
If true, the border line underneath the tabs expands to the full width of the container, rather than being slightly padded from the edges
onChange
function
Optional callback which is executed when a new tab is selected. Passed (newTabIndex, groupId).
children*
React.ReactNode
Data to be displayed as tabs
Object contains nested props, see below:
children.heading
string
Title of the tab
children.tooltip
string
Optional tooltip to be displayed next to the tab title
children.group
string
A unique identifier for a tab 'group' that, when active, all Tabs with this id will become active when one is selected. Note it's necessary to wrap the page with TabProvider for this feature to function.
className
string
Optional className to add to the root element
classNameTabBar
string
Optional className to add to the tabs bar container. Useful for sticky positioning.

Examples

A bunch of tabs

Share
Code Editor
<Tabs>

  <Tab heading="First Tab" />

  <Tab heading="Second tab with long name"/>

  <Tab heading="Third long name tab" />

  <Tab heading="Fourth tab lots of tabs" />

  <Tab heading="Fifth Tab" />

  <Tab heading="Sixth Tab" />

  <Tab heading="Seventh tab with an even longer name than the second tab" />

</Tabs>

With tooltips!

Share
Code Editor
<Tabs>

  <Tab heading="First Tab" />

  <Tab heading="Second tab with long name" tooltip="What a useful tip!" />

  <Tab heading="Third long name tab" />

  <Tab heading="Fourth tab lots of tabs" tooltip="How neat is that?" />

  <Tab heading="Fifth Tab" />

  <Tab heading="Sixth Tab" tooltip="'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a ex et nulla aliquam placerat. Phasellus euismod posuere porttitor. Praesent quis mollis nibh, eget imperdiet velit. Nunc pulvinar ultrices metus quis dapibus.'"/>

</Tabs>

With an onChange handler

Share
Code Editor
<Tabs onChange={console.log}>

  <Tab heading="First Tab" />

  <Tab heading="Second tab with long name" tooltip="What a useful tip!" />

  <Tab heading="Third long name tab" />

  <Tab heading="Fourth tab lots of tabs" tooltip="How neat is that?" />

  <Tab heading="Fifth Tab" />

  <Tab heading="Sixth Tab" tooltip="'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a ex et nulla aliquam placerat. Phasellus euismod posuere porttitor. Praesent quis mollis nibh, eget imperdiet velit. Nunc pulvinar ultrices metus quis dapibus.'"/>

</Tabs>

With Tab Groups

First, second and third tabs should be actively synced based on their matching group property. Note the TabProvider must wrap the page where this component is used for 'groups' to function properly.

Share
Code Editor
<Tabs>

  <Tab heading="First Tab" group="first">

    <p>First tab content</p>

  </Tab>

  <Tab heading="Second Tab" group="second">

    <p>Second tab content</p>

  </Tab>

  <Tab heading="Third Tab" group="third">

    <p>Third tab content</p>

  </Tab>

</Tabs>
Share
Code Editor
<Tabs>

  <Tab heading="First Tab" group="first">

    <p>First tab content</p>

  </Tab>

  <Tab heading="Second Tab" group="second">

    <p>Second tab content</p>

  </Tab>

  <Tab heading="Third Tab" group="third">

    <p>Third tab content</p>

  </Tab>

</Tabs>