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.

    <Tabs defaultActiveKey="profile" id="uncontrolled-tab-example">
  <Tab eventKey="home" title="Home">
    <Sonnet />
  </Tab>
  <Tab eventKey="profile" title="Profile">
    <Sonnet />
  </Tab>
  <Tab eventKey="contact" title="Contact" disabled>
    <Sonnet />
  </Tab>
</Tabs>;
    Press esc to disable tab trapping

    Controlled

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

    class ControlledTabs extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      key: 'home',
    };
  }

  render() {
    return (
      <Tabs
        id="controlled-tab-example"
        activeKey={this.state.key}
        onSelect={key => this.setState({ key })}
      >
        <Tab eventKey="home" title="Home">
          <Sonnet />
        </Tab>
        <Tab eventKey="profile" title="Profile">
          <Sonnet />
        </Tab>
        <Tab eventKey="contact" title="Contact" disabled>
          <Sonnet />
        </Tab>
      </Tabs>
    );
  }
}

render(<ControlledTabs />);
    Press esc to disable tab trapping

    No animation

    Set the transition prop to false

    <Tabs defaultActiveKey="home" transition={false} id="noanim-tab-example">
  <Tab eventKey="home" title="Home">
    <Sonnet />
  </Tab>
  <Tab eventKey="profile" title="Profile">
    <Sonnet />
  </Tab>
  <Tab eventKey="contact" title="Contact" disabled>
    <Sonnet />
  </Tab>
</Tabs>;
    Press esc to disable tab trapping

    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.

    Tab 1
    Tab 2

    <Tab.Container id="left-tabs-example" defaultActiveKey="first">
  <Row>
    <Col sm={3}>
      <Nav variant="pills" className="flex-column">
        <Nav.Item>
          <Nav.Link eventKey="first">Tab 1</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="second">Tab 2</Nav.Link>
        </Nav.Item>
      </Nav>
    </Col>
    <Col sm={9}>
      <Tab.Content>
        <Tab.Pane eventKey="first">
          <Sonnet />
        </Tab.Pane>
        <Tab.Pane eventKey="second">
          <Sonnet />
        </Tab.Pane>
      </Tab.Content>
    </Col>
  </Row>
</Tab.Container>;
    Press esc to disable tab trapping

    API

    Tabsview source file

    import Tabs from 'react-bootstrap/Tabs'
    NameTypeDefaultDescription
    activeKey
    any
    controlled by: onSelect, initial prop: defaultActivekey

    Mark the Tab with a matching eventKey as active.

    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. Use false to disable, true to enable the default <Fade> animation or a react-transition-group v2 <Transition/> component.

    unmountOnExit
    boolean
    		false

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

    variant
    'tabs' | 'pills'
    		'tabs'

    Navigation style

    Tabview source file

    import Tab from 'react-bootstrap/Tab'
    NameTypeDefaultDescription
    title required
    node

    TabContainerview source file

    import TabContainer from 'react-bootstrap/TabContainer'
    NameTypeDefaultDescription
    activeKey
    any
    controlled by: onSelect, initial prop: defaultActivekey

    The eventKey of the currently active tab.

    generateChildId
    function
    		(eventKey, type) => `${this.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. Use false to disable, true to enable the default <Fade> animation or a react-transition-group v2 <Transition/> component.

    unmountOnExit
    boolean

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

    TabContentview source file

    import TabContent from 'react-bootstrap/TabContent'
    NameTypeDefaultDescription
    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.

    TabPaneview source file

    import TabPane from 'react-bootstrap/TabPane'
    NameTypeDefaultDescription
    active
    boolean

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

    as
    elementType

    You can use a custom element type for this component.

    bsClass
    string
    		'tab-pane'
    eventKey
    any

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

    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. Use false to disable, true to enable the default <Fade> animation or a react-transition-group v2 <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.