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

#Custom Tab Layout

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]

NameTypeDefaultDescription
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]

NameTypeDefaultDescription
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]

NameTypeDefaultDescription
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]

NameTypeDefaultDescription
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]

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

id
string
aria-labelledby
string
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