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.

    Fill and justify

    Similar to the Nav component, you can force the contents of your Tabs to extend the full available width. To proportionately fill the space use fill. Notice that the Tabs is the entire width but each Tab item is a different size.

    If you want each Tab to be the same size use justify.

    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

    Tabs

    import Tabs from 'react-bootstrap/Tabs'
    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

    fill
    boolean

    Have all Tabss proportionately fill all available width.

    id
    string

    HTML id attribute, required if no generateChildId prop is specified.

    justify
    boolean

    Have all Tabs evenly fill all available width.

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

    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'
    NameTypeDefaultDescription
    disabled
    boolean

    The disabled state of the tab.

    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.

    tabAttrs
    object

    Object containing attributes to pass to underlying nav link.

    tabClassName
    string

    Class to pass to the underlying nav link.

    title required
    node

    Content for the tab title.

    TabContainer

    import TabContainer from 'react-bootstrap/TabContainer'
    NameTypeDefaultDescription
    activeKey
    string | number
    controlled by: onSelect, initial prop: defaultActiveKey

    The eventKey of the currently active tab.

    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'
    NameTypeDefaultDescription
    as
    elementType
    		<div>

    You can use a custom element type for this component.

    bsPrefix required
    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'
    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.