Components

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

#Uncontrolled

Allow the component to control its own state.

Tab 2 content

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

Tab 1 content

class ControlledTabs extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.handleSelect = this.handleSelect.bind(this);

    this.state = {
      key: 1
    };
  }

  handleSelect(key) {
    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>
    );
  }
}

render(<ControlledTabs />);

#No animation

Set the animation prop to false

Tab 1 content

<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>;

#Tabs with Dropdown

<Tab.Container id="tabs-with-dropdown" defaultActiveKey="first">
  <Row className="clearfix">
    <Col sm={12}>
      <Nav bsStyle="tabs">
        <NavItem eventKey="first">Tab 1</NavItem>
        <NavItem eventKey="second">Tab 2</NavItem>
        <NavDropdown eventKey="3" title="Dropdown" id="nav-dropdown-within-tab">
          <MenuItem eventKey="3.1">Action</MenuItem>
          <MenuItem eventKey="3.2">Another action</MenuItem>
          <MenuItem eventKey="3.3">Something else here</MenuItem>
          <MenuItem divider />
          <MenuItem eventKey="3.4">Separated link</MenuItem>
        </NavDropdown>
      </Nav>
    </Col>
    <Col sm={12}>
      <Tab.Content animation>
        <Tab.Pane eventKey="first">Tab 1 content</Tab.Pane>
        <Tab.Pane eventKey="second">Tab 2 content</Tab.Pane>
        <Tab.Pane eventKey="3.1">Tab 3.1 content</Tab.Pane>
        <Tab.Pane eventKey="3.2">Tab 3.2 content</Tab.Pane>
        <Tab.Pane eventKey="3.3">Tab 3.3 content</Tab.Pane>
        <Tab.Pane eventKey="3.4">Tab 3.4 content</Tab.Pane>
      </Tab.Content>
    </Col>
  </Row>
</Tab.Container>;

For more complex layouts the flexible TabContainer, TabContent, andTabPane 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.

Tab 1 content

<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 [source]

Name	Type	Default	Description
activeKey	any		controlled by: `onSelect`, initial prop: `defaultActiveKey` Mark the Tab with a matching `eventKey` as active.
bsStyle	one of: `'tabs'`, `'pills'`	'tabs'	Navigation style
animation	boolean \| elementType	true	Sets a default animation strategy. Use `false` to disable, `true` to enable the default `<Fade>` animation, or a react-transition-group v2 `<Transition/>` component.
id	requiredForA11y( PropTypes.oneOfType([PropTypes.string, PropTypes.number]) )
onSelect	function		controls `activeKey` Callback fired when a Tab is selected. `function ( Any eventKey, SyntheticEvent event? )`
mountOnEnter	boolean	false	Wait until the first "enter" transition to mount tabs (add them to the DOM)
unmountOnExit	boolean	false	Unmount tabs (remove it from the DOM) when it is no longer visible

#Tab [source]

Name	Type	Description
disabled	boolean
title	node
tabClassName	string	tabClassName is used as className for the associated NavItem
bsClass	string	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.

#TabContainer [source]

Name	Type	Default	Description
id	function(props, ...args) { let error = null; if (!props.generateChildId) { error = idPropType(props, ...args); if (!error && !props.id) { error = new Error( 'In order to properly initialize Tabs in a way that is accessible ' + 'to assistive technologies (such as screen readers) an `id` or a ' + '`generateChildId` prop to TabContainer is required' ); } } return error;		HTML id attribute, required if no `generateChildId` prop is specified.
generateChildId	function	(eventKey, type) => `${this.props.id}-${type}-${key}`	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"`.
onSelect	function		controls `activeKey` A callback fired when a tab is selected.
activeKey	any		controlled by: `onSelect`, initial prop: `defaultActiveKey` The `eventKey` of the currently active tab.

#TabContent [source]

Name	Type	Default	Description
componentClass	elementType	'div'	You can use a custom element type for this component.
animation	boolean \| elementType	true	Sets a default animation strategy for all children `<TabPane>`s. Use `false` to disable, `true` to enable the default `<Fade>` animation or a react-transition-group v2 `<Transition/>` component.
mountOnEnter	boolean	false	Wait until the first "enter" transition to mount tabs (add them to the DOM)
unmountOnExit	boolean	false	Unmount tabs (remove it from the DOM) when they are no longer visible
bsClass	string	'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.

#TabPane [source]

Name	Type	Default	Description
eventKey	any		Uniquely identify the `<TabPane>` among its siblings.
animation	boolean \| elementType		Use animation when showing or hiding `<TabPane>`s. Use `false` to disable, `true` to enable the default `<Fade>` animation or a react-transition-group v2 `<Transition/>` component.
bsClass	string	'tab-pane'	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.
onEnter	function		Transition onEnter callback when animation is not `false`
onEntering	function		Transition onEntering callback when animation is not `false`
onEntered	function		Transition onEntered callback when animation is not `false`
onExit	function		Transition onExit callback when animation is not `false`
onExiting	function		Transition onExiting callback when animation is not `false`
onExited	function		Transition onExited callback when animation is not `false`
mountOnEnter	boolean		Wait until the first "enter" transition to mount the tab (add it to the DOM)
unmountOnExit	boolean		Unmount the tab (remove it from the DOM) when it is no longer visible

Components

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

#Uncontrolled

#Controlled

#No animation

#Tabs with Dropdown

#Custom Tab Layout

#Props

#Tabs [source]

#Tab [source]

#TabContainer [source]

#TabContent [source]

#TabPane [source]