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.

    Controlled

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

    No animation

    Set the transition prop to false

    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.

    API

    Tabsview source file

    import Tabs from 'react-bootstrap/Tabs'Copy import code for the Tabs component
    NameTypeDefaultDescription
    activeKey
    string | number
    controlled by: onSelect, initial prop: defaultActivekey

    Mark the Tab with a matching eventKey as active.

    defaultActiveKey
    string | number

    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

    Tabview source file

    import Tab from 'react-bootstrap/Tab'Copy import code for the Tab component
    NameTypeDefaultDescription
    disabled
    boolean
    eventKey
    string | number

    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

    TabContainerview source file

    import TabContainer from 'react-bootstrap/TabContainer'Copy import code for the TabContainer component
    NameTypeDefaultDescription
    activeKey
    string | number
    controlled by: onSelect, initial prop: defaultActivekey

    The eventKey of the currently active tab.

    defaultActiveKey
    EventKey
    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

    TabContentview source file

    import TabContent from 'react-bootstrap/TabContent'Copy import code for the TabContent component
    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'Copy import code for the TabPane component
    NameTypeDefaultDescription
    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
    string | number

    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.