Tab

Tabs are components which separate content placed in the same wrapper, but in the separate pane. Only one pane can be displayed at the time.

Bootstrap tabs are components which separate content placed in the same wrapper, but in the separate pane. Only one pane can be displayed at the time. Tabs available in CDB share general markup and styles, as well as the .naved element managing the active and disabled states.

CDB Tabs are compatible with ReactRouter, meaning that <NavLink> components inside can be used both for one-page tabs and general routing solution for main navigation. Make sure to include the wrapping <BrowserRouter>.

If you are using navs to provide a navigation bar, be sure to add an appropriate role attributes to the <NavLinks> (role="tab").

Default Tab

Pro Component

Default Tab example.

import React from "react";
import { CDBNav, CDBTabLink, CDBTabContent, CDBTabPane, CDBContainer } from "cdbreact";
export const Tab = () => {
  return (
    <CDBContainer>
            <CDBContainer>
              <CDBNav className="nav-tabs mt-5">
                <CDBTabLink
                  link
                  to="#"
                  active={this.state.activeItem === "1"}
                  onClick={this.toggle("1")}
                  role="tab"
                >
                  Label 1
                </CDBTabLink>
                <CDBTabLink
                  link
                  to="#"
                  active={this.state.activeItem === "2"}
                  onClick={this.toggle("2")}
                  role="tab"
                >
                  Label 2
                </CDBTabLink>
                <CDBTabLink
                  link
                  to="#"
                  active={this.state.activeItem === "3"}
                  onClick={this.toggle("3")}
                  role="tab"
                >
                  Label 3
                </CDBTabLink>
              </CDBNav>
              <CDBTabContent activeItem={this.state.activeItem}>
                <CDBTabPane tabId="1" role="tabpanel">
                  <p className="mt-2">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Nihil odit magnam minima, soluta doloribus reiciendis
                    molestiae placeat unde eos molestias. Quisquam aperiam,
                    pariatur. Tempora, placeat ratione porro voluptate odit
                    minima.
                  </p>
                </CDBTabPane>
                <CDBTabPane tabId="2" role="tabpanel">
                  <p className="mt-2">
                    Quisquam aperiam, pariatur. Tempora, placeat ratione porro
                    voluptate odit minima. Lorem ipsum dolor sit amet,
                    consectetur adipisicing elit. Nihil odit magnam minima,
                    soluta doloribus reiciendis molestiae placeat unde eos
                    molestias.
                  </p>
                  <p>
                    Quisquam aperiam, pariatur. Tempora, placeat ratione porro
                    voluptate odit minima. Lorem ipsum dolor sit amet,
                    consectetur adipisicing elit. Nihil odit magnam minima,
                    soluta doloribus reiciendis molestiae placeat unde eos
                    molestias.
                  </p>
                </CDBTabPane>
                <CDBTabPane tabId="3" role="tabpanel">
                  <p className="mt-2">
                    Quisquam aperiam, pariatur. Tempora, placeat ratione porro
                    voluptate odit minima. Lorem ipsum dolor sit amet,
                    consectetur adipisicing elit. Nihil odit magnam minima,
                    soluta doloribus reiciendis molestiae placeat unde eos
                    molestias.
                  </p>
                </CDBTabPane>
              </CDBTabContent>
            </CDBContainer>
    </CDBContainer>
  );
};

Tab Justified

Pro Component

import React from "react";
import { CDBNav, CDBTabLink, CDBTabContent, CDBTabPane, CDBContainer } from "cdbreact";
export const Tab = () => {
  return (
    <CDBContainer>
            <CDBContainer>
              <CDBNav className="nav-tabs mt-5 nav-justified">
                <CDBTabLink
                  link
                  to="#"
                  active={this.state.activeItem2 === "4"}
                  onClick={this.toggle2("4")}
                  role="tab"
                >
                  Label 1
                </CDBTabLink>
                <CDBTabLink
                  link
                  to="#"
                  active={this.state.activeItem2 === "5"}
                  onClick={this.toggle2("5")}
                  role="tab"
                >
                  Label 2
                </CDBTabLink>
                <CDBTabLink
                  link
                  to="#"
                  active={this.state.activeItem2 === "6"}
                  onClick={this.toggle2("6")}
                  role="tab"
                >
                  Label 3
                </CDBTabLink>
              </CDBNav>
              <CDBTabContent activeItem={this.state.activeItem2}>
                <CDBTabPane tabId="4" role="tabpanel">
                  <p className="mt-2">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Nihil odit magnam minima, soluta doloribus reiciendis
                    molestiae placeat unde eos molestias. Quisquam aperiam,
                    pariatur. Tempora, placeat ratione porro voluptate odit
                    minima.
                  </p>
                </CDBTabPane>
                <CDBTabPane tabId="5" role="tabpanel">
                  <p className="mt-2">
                    Quisquam aperiam, pariatur. Tempora, placeat ratione porro
                    voluptate odit minima. Lorem ipsum dolor sit amet,
                    consectetur adipisicing elit. Nihil odit magnam minima,
                    soluta doloribus reiciendis molestiae placeat unde eos
                    molestias.
                  </p>
                  <p>
                    Quisquam aperiam, pariatur. Tempora, placeat ratione porro
                    voluptate odit minima. Lorem ipsum dolor sit amet,
                    consectetur adipisicing elit. Nihil odit magnam minima,
                    soluta doloribus reiciendis molestiae placeat unde eos
                    molestias.
                  </p>
                </CDBTabPane>
                <CDBTabPane tabId="6" role="tabpanel">
                  <p className="mt-2">
                    Quisquam aperiam, pariatur. Tempora, placeat ratione porro
                    voluptate odit minima. Lorem ipsum dolor sit amet,
                    consectetur adipisicing elit. Nihil odit magnam minima,
                    soluta doloribus reiciendis molestiae placeat unde eos
                    molestias.
                  </p>
                </CDBTabPane>
              </CDBTabContent>
            </CDBContainer>
    </CDBContainer>
  );
};

Tab with Icons

Pro Component

import React from "react";
import { CDBNav, CDBTabLink, CDBTabContent, CDBTabPane, CDBContainer } from "cdbreact";
export const Tab = () => {
  return (
    <CDBContainer>
            <CDBContainer>
              <CDBNav className="nav-tabs mt-5 nav-justified">
                <CDBTabLink
                  link
                  to="#"
                  active={this.state.activeItem3 === "7"}
                  onClick={this.toggle3("7")}
                  role="tab"
                >
                  <CDBIcon icon="bomb" className="mr-2" />
                  Label 1
                </CDBTabLink>
                <CDBTabLink
                  link
                  to="#"
                  active={this.state.activeItem3 === "8"}
                  onClick={this.toggle3("8")}
                  role="tab"
                >
                  <CDBIcon icon="bomb" className="mr-2" />
                  Label 2
                </CDBTabLink>
                <CDBTabLink
                  link
                  to="#"
                  active={this.state.activeItem3 === "9"}
                  onClick={this.toggle3("9")}
                  role="tab"
                >
                  <CDBIcon icon="bomb" className="mr-2" />
                  Label 3
                </CDBTabLink>
              </CDBNav>
              <CDBTabContent
                activeItem={this.state.activeItem3}
                className="mt-5"
                style={{ marginTop: "30px" }}
              >
                <CDBTabPane tabId="7" role="tabpanel">
                  <p className="mt-2">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Nihil odit magnam minima, soluta doloribus reiciendis
                    molestiae placeat unde eos molestias. Quisquam aperiam,
                    pariatur. Tempora, placeat ratione porro voluptate odit
                    minima.
                  </p>
                </CDBTabPane>
                <CDBTabPane tabId="8" role="tabpanel">
                  <p className="mt-2">
                    Quisquam aperiam, pariatur. Tempora, placeat ratione porro
                    voluptate odit minima. Lorem ipsum dolor sit amet,
                    consectetur adipisicing elit. Nihil odit magnam minima,
                    soluta doloribus reiciendis molestiae placeat unde eos
                    molestias.
                  </p>
                  <p>
                    Quisquam aperiam, pariatur. Tempora, placeat ratione porro
                    voluptate odit minima. Lorem ipsum dolor sit amet,
                    consectetur adipisicing elit. Nihil odit magnam minima,
                    soluta doloribus reiciendis molestiae placeat unde eos
                    molestias.
                  </p>
                </CDBTabPane>
                <CDBTabPane tabId="9" role="tabpanel">
                  <p className="mt-2">
                    Quisquam aperiam, pariatur. Tempora, placeat ratione porro
                    voluptate odit minima. Lorem ipsum dolor sit amet,
                    consectetur adipisicing elit. Nihil odit magnam minima,
                    soluta doloribus reiciendis molestiae placeat unde eos
                    molestias.
                  </p>
                </CDBTabPane>
              </CDBTabContent>
            </CDBContainer>
    </CDBContainer>
  );
};

API

In this section you will find advanced information about the Tab component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use to work with it.

Contrast Tab Import Statement

You need to import the proper components first before using it.

import { CDBNav, CDBTabLink, CDBTabContent, CDBTabPane, CDBContainer } from "cdbreact";

API Reference: Contrast Tab Content Properties

The table below shows the configuration options of the CDBTabContent component.

Name	Type	Default	Description	Example
className	String		Sets custom classes, use class `card` to achieve card-like effect (you can use Card subcomponents inside)	<CDBTabContent className="card" ... />
activeItem	Any		Active TabPane id - use this prop to control the component	<CDBTabContent activeItem="activeTab" ... />

API Reference: Contrast Tab Pane Properties

The table below shows the configuration options of the CDBTabPane component.

Name	Type	Default	Description	Example
className	String		Sets custom classes	<CDBTabPane className="customClass" ... />
tabId	Any		Indicates active pane	<CDBTabPane tabId="Tab1" ... />

EditableTable

Table