This is a pass through component from React-Bootstrap.
See React-Bootstrap for documentation.

Uncontrolled usage

Controlled usage

Button group usage

Pills usage

With notification

With screen reader text in notification

Responsive support


Basic usage

Theme Variables (SCSS)#

$tab-notification-height: 1rem !default;
$tab-notification-width: 1rem !default;
$tab-notification-font-size: $font-size-xs !default;
Tabs Props API
  • labels node[] Required

    specifies the list of elements that will be displayed within each of the tabbed views. It is the content relevant to each label. Children should not be passed as Props, but should instead be nested between the opening and closing <Tabs> </Tabs> tags.

  • children element[] Required

    specifies the list of headings that will appear on all of the tabs that will be created.

Tab Props API
  • title node Required

    Specifies the Tab navigation title.

  • notification node

    Specifies notification bubble content. It appears on the top right of the Tab.

  • disabled bool

    Specifies whether Tab is disabled.

  • 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

    Specifies class name to append to the base element.