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>

Controlled

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

function ControlledTabs() {
  const [key, setKey] = useState('home');

  return (
    <Tabs
      id="controlled-tab-example"
      activeKey={key}
      onSelect={(k) => setKey(k)}
    >
      <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 />);

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>

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

API

Tabs

import Tabs from 'react-bootstrap/Tabs'

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'

Name	Type	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'

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'

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'

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/