Overview

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.

Basic Tabs

Tabs with Icons

Small Tabs

To use smaller variants of tabs, add the .nav-tabs-sm class.

Tabs with Content

No additional code is required to handle tabs with content.

API

Tabs

import Tabs from `@trimbleinc/modus-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

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 `@trimbleinc/modus-react-bootstrap/Tab`
NameTypeDefaultDescription
disabled
boolean
eventKey
string | number
tabClassName
string
title required
node

TabContainer

import TabContainer from `@trimbleinc/modus-react-bootstrap/TabContainer`
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

TabContent

import TabContent from `@trimbleinc/modus-react-bootstrap/TabContent`
NameTypeDefaultDescription
as
elementType
<div>
bsPrefix
string
'tab-content'

TabPane

import TabPane from `@trimbleinc/modus-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
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'