Tabbed components

Dynamic tabbed interfaces

Examples

Create dynamic tabbed interfaces, as described in the WAI ARIA Authoring Practices. Tabs is a higher-level component for quickly creating a Nav matched with a set of TabPanes.

Controlled

Tabs can be controlled directly when you want to handle the selection logic personally.

No animation

Set the transition prop to false

Dropdowns?

Dynamic tabbed interfaces should not contain dropdown menus, as this causes both usability and accessibility issues. From a usability perspective, the fact that the currently displayed tab’s trigger element is not immediately visible (as it’s inside the closed dropdown menu) can cause confusion. From an accessibility point of view, there is currently no sensible way to map this sort of construct to a standard WAI ARIA pattern, meaning that it cannot be easily made understandable to users of assistive technologies.

That said, it Dropdowns do work technically (sans focus management), but we don't make any claims about support.

Custom Tab Layout

For more complex layouts the flexible TabContainer, TabContent, and TabPane components along with any style of Nav allow you to quickly piece together your own Tabs component with additional markup needed.

Create a set of NavItems each with an eventKey corresponding to the eventKey of a TabPane. Wrap the whole thing in a TabContainer and you have fully functioning custom tabs component. Check out the below example making use of the grid system and pills.

API

Tabs

import Tabs from 'react-bootstrap/Tabs'Copy import code for the Tabs component
Name Type Default Description
activeKey
any
controlled by: onSelect, initial prop: defaultActivekey

Mark the Tab with a matching eventKey as active.

defaultActiveKey
any

The default active key that is selected on start

id
string

HTML id attribute, required if no generateChildId prop is specified.

mountOnEnter
boolean
false

Wait until the first "enter" transition to mount tabs (add them to the DOM)

onSelect
function
controls activeKey

Callback fired when a Tab is selected.

function (
  Any eventKey,
  SyntheticEvent event?
)
transition
Transition | false
{Fade}

Sets a default animation strategy for all children <TabPane>s. Defaults to <Fade> animation, else use false to disable or a react-transition-group <Transition/> component.

unmountOnExit
boolean
false

Unmount tabs (remove it from the DOM) when it is no longer visible

variant
'tabs' | 'pills'
'tabs'

Navigation style

Tab

import Tab from 'react-bootstrap/Tab'Copy import code for the Tab component
Name Type Default Description
disabled
boolean
eventKey
string

A unique identifier for the Component, the eventKey makes it distinguishable from others in a set. Similar to React's key prop, in that it only needs to be unique amongst the Components siblings, not globally.

tabClassName
string
title required
node

TabContainer

import TabContainer from 'react-bootstrap/TabContainer'Copy import code for the TabContainer component
Name Type Default Description
activeKey
any
controlled by: onSelect, initial prop: defaultActivekey

The eventKey of the currently active tab.

defaultActiveKey
unknown
generateChildId
function
(eventKey, type) => `${props.id}-${type}-${eventKey}`

A function that takes an eventKey and type and returns a unique id for child tab <NavItem>s and <TabPane>s. The function must be a pure function, meaning it should always return the same id for the same set of inputs. The default value requires that an id to be set for the <TabContainer>.

The type argument will either be "tab" or "pane".

id
string

HTML id attribute, required if no generateChildId prop is specified.

mountOnEnter
boolean

Wait until the first "enter" transition to mount tabs (add them to the DOM)

onSelect
function
controls activeKey

A callback fired when a tab is selected.

transition
{Transition | false}
{Fade}

Sets a default animation strategy for all children <TabPane>s. Defaults to <Fade> animation; else, use false to disable, or a custom react-transition-group <Transition/> component.

unmountOnExit
boolean

Unmount tabs (remove it from the DOM) when they are no longer visible

TabContent

import TabContent from 'react-bootstrap/TabContent'Copy import code for the TabContent component
Name Type Default Description
as
elementType
<div>

You can use a custom element type for this component.

bsPrefix
string
'tab-content'

Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

TabPane

import TabPane from 'react-bootstrap/TabPane'Copy import code for the TabPane component
Name Type Default Description
active
boolean

Toggles the active state of the TabPane, this is generally controlled by a TabContainer.

aria-labelledby
string
as
elementType

You can use a custom element type for this component.

eventKey
any

A key that associates the TabPane with it's controlling NavLink.

id
string
mountOnEnter
boolean

Wait until the first "enter" transition to mount the tab (add it to the DOM)

onEnter
function

Transition onEnter callback when animation is not false

onEntered
function

Transition onEntered callback when animation is not false

onEntering
function

Transition onEntering callback when animation is not false

onExit
function

Transition onExit callback when animation is not false

onExited
function

Transition onExited callback when animation is not false

onExiting
function

Transition onExiting callback when animation is not false

transition
boolean | elementType

Use animation when showing or hiding <TabPane>s. Defaults to <Fade> animation, else use false to disable or a react-transition-group <Transition/> component.

unmountOnExit
boolean

Unmount the tab (remove it from the DOM) when it is no longer visible

bsPrefix
string
'tab-pane'

Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

© 2014–present Stephen J. Collings, Matthew Honnibal, Pieter Vanderwerff
Licensed under the MIT License (MIT).
https://react-bootstrap.github.io/components/tabs/