# Togglable tabs Tabs, Tab, TabContainer, TabContent, TabPane

Add quick, dynamic tab functionality to transition through panes of local content.

# Uncontrolled


          const tabsInstance = (
            <Tabs defaultActiveKey={2} id="uncontrolled-tab-example">
              <Tab eventKey={1} title="Tab 1">Tab 1 content</Tab>
              <Tab eventKey={2} title="Tab 2">Tab 2 content</Tab>
              <Tab eventKey={3} title="Tab 3" disabled>Tab 3 content</Tab>
            </Tabs>
          );

          
        

# Controlled

Pass down the active state on render via props.


          class ControlledTabs extends React.Component {
            constructor(...args) {
              super(...args);

              this.state = { key: 1 };
            }

            handleSelect(key) {
              if (key === undefined) return;
              alert('selected ' + key);
              this.setState({key});
            }

            render() {
              return (
                <Tabs activeKey={this.state.key} onSelect={::this.handleSelect} id="controlled-tab-example">
                  <Tab eventKey={1} title="Tab 1">Tab 1 content</Tab>
                  <Tab eventKey={2} title="Tab 2">Tab 2 content</Tab>
                  <Tab eventKey={3} title="Tab 3" disabled>Tab 3 content</Tab>
                </Tabs>
              );
            }
          }

          
        

# No animation

Set the animation prop to false


          const tabsInstance = (
            <Tabs defaultActiveKey={1} animation={false} id="noanim-tab-example">
              <Tab eventKey={1} title="Tab 1">Tab 1 content</Tab>
              <Tab eventKey={2} title="Tab 2">Tab 2 content</Tab>
              <Tab eventKey={3} title="Tab 3" disabled>Tab 3 content</Tab>
            </Tabs>
          );

          
        

# 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.

Just 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.


          const tabsInstance = (
            <Tab.Container id="left-tabs-example" defaultActiveKey="first">
              <Row className="clearfix">
                <Col sm={4}>
                  <Nav bsStyle="pills" stacked>
                    <NavItem eventKey="first">
                      Tab 1
                    </NavItem>
                    <NavItem eventKey="second">
                      Tab 2
                    </NavItem>
                  </Nav>
                </Col>
                <Col sm={8}>
                  <Tab.Content animation>
                    <Tab.Pane eventKey="first">
                      Tab 1 content
                    </Tab.Pane>
                    <Tab.Pane eventKey="second">
                      Tab 2 content
                    </Tab.Pane>
                  </Tab.Content>
                </Col>
              </Row>
            </Tab.Container>
          );

          
        

# Props

Tabs

NameTypeDefaultDescription
activeKeyany
controlled by: onSelect, initial prop: defaultActiveKey
Mark the Tab with a matching eventKey as active.
animationbooleantrue
bsStyleone of: 'tabs', 'pills'

Navigation style for tabs

If not specified, it will be treated as 'tabs' when vertically positioned and 'pills' when horizontally positioned.

idrequiredForA11y
onSelectfunction
controls: activeKey
Callback fired when a Tab is selected.
function (
	Any eventKey,
	SyntheticEvent event?
)
unmountOnExitbooleanfalseUnmount tabs (remove it from the DOM) when it is no longer visible

Tab

NameTypeDefaultDescription
animationboolean | elementTypeUse animation when showing or hiding TabPanes. Use false to disable, true to enable the default "Fade" animation or any Transition component.
aria-labelledbystring
bsClassstring'tab'Base CSS class and prefix for the component. Generally one should only change bsClass to provide new, non-Bootstrap, CSS styles for a component.
disabledboolean
eventKeyanyUniquely identify the TabPane amoung its siblings.
idstring
onEnterfunctionTransition onEnter callback when animation is not false
onEnteredfunctionTransition onEntered callback when animation is not false
onEnteringfunctionTransition onEntering callback when animation is not false
onExitfunctionTransition onExit callback when animation is not false
onExitedfunctionTransition onExited callback when animation is not false
onExitingfunctionTransition onExiting callback when animation is not false
tabClassNamestringtabClassName is used as className for the associated NavItem
titlenode
unmountOnExitbooleanUnmount the tab (remove it from the DOM) when it is no longer visible

TabContainer

NameTypeDefaultDescription
activeKeyany
controlled by: onSelect, initial prop: defaultActiveKey
The eventKey of the currently active tab.
generateChildIdfunction(eventKey, type) => `${this.props.id}-${type}-${key}`

A function that takes an eventKey and type and returns a unique id for child tab NavItems and TabPanes. 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".

idcustomHTML id attribute, required if no generateChildId prop is specified.
onSelectfunction
controls: activeKey
Callback fired when a Tab is selected.
function (
	Any eventKey,
	SyntheticEvent event?
)

TabContent

NameTypeDefaultDescription
animationboolean | elementTypetrueSets a default animation strategy for all children TabPanes. Use false to disable, true to enable the default "Fade" animation or any <Transition> component.
bsClassstring'tab'Base CSS class and prefix for the component. Generally one should only change bsClass to provide new, non-Bootstrap, CSS styles for a component.
componentClasselementType'div'the Component used to render the TabContent
unmountOnExitbooleanfalseUnmount the tab (remove it from the DOM) when it is no longer visible

TabPane

NameTypeDefaultDescription
animationboolean | elementTypeUse animation when showing or hiding TabPanes. Use false to disable, true to enable the default "Fade" animation or any Transition component.
aria-labelledbystring
bsClassstring'tab'Base CSS class and prefix for the component. Generally one should only change bsClass to provide new, non-Bootstrap, CSS styles for a component.
disabledboolean
eventKeyanyUniquely identify the TabPane amoung its siblings.
idstring
onEnterfunctionTransition onEnter callback when animation is not false
onEnteredfunctionTransition onEntered callback when animation is not false
onEnteringfunctionTransition onEntering callback when animation is not false
onExitfunctionTransition onExit callback when animation is not false
onExitedfunctionTransition onExited callback when animation is not false
onExitingfunctionTransition onExiting callback when animation is not false
tabClassNamestringtabClassName is used as className for the associated NavItem
titlenode
unmountOnExitbooleanUnmount the tab (remove it from the DOM) when it is no longer visible