🤩
Windframe Import Update is finally here.

Tab

React Bootstrap 5 Tab

Bootstrap tabs are components that separate content placed in the same wrapper but a separate pane. Only one pane can be displayed at a time.

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

React Bootstrap 5 Tab

js
import React, { useState } from "react";
import { CDBNav, CDBTabLink, CDBTabContent, CDBTabPane, CDBContainer } from "cdbreact";
const Tabs = () => {
const [item1, setItem1] = useState("1");
const toggle = (tab) => {
if (item1 !== tab) {
setItem1(tab)
}
};
return (
<CDBContainer>
<CDBNav className="nav-tabs mt-5">
<CDBTabLink
link
to="#"
active={item1 === "1"}
onClick={() => toggle("1")}
role="tab"
>
Label 1
</CDBTabLink>
<CDBTabLink
link
to="#"
active={item1 === "2"}
onClick={() => toggle("2")}
role="tab"
>
Label 2
</CDBTabLink>
<CDBTabLink
link
to="#"
active={item1 === "3"}
onClick={() => toggle("3")}
role="tab"
>
Label 3
</CDBTabLink>
</CDBNav>
<CDBTabContent activeItem={item1}>
<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>
);
};
export default Tabs;

Tab Justified

Pro Component

React Bootstrap 5 Tab Justified

js
import React, { useState } from "react";
import { CDBNav, CDBTabLink, CDBTabContent, CDBTabPane, CDBContainer } from "cdbreact";
const Tabs = () => {
const [item1, setItem1] = useState("1");
const toggle = (tab) => {
if (item1 !== tab) {
setItem1(tab)
}
};
return (
<CDBContainer>
<CDBNav className="nav-tabs mt-5 nav-justified">
<CDBTabLink
link
to="#"
active={item1 === "1"}
onClick={() => toggle("1")}
role="tab"
>
Label 1
</CDBTabLink>
<CDBTabLink
link
to="#"
active={item1 === "2"}
onClick={() => toggle("2")}
role="tab"
>
Label 2
</CDBTabLink>
<CDBTabLink
link
to="#"
active={item1 === "3"}
onClick={() => toggle("3")}
role="tab"
>
Label 3
</CDBTabLink>
</CDBNav>
<CDBTabContent activeItem={item1}>
<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>
);
};
export default Tabs;

Tab with Icons

Pro Component

React Bootstrap 5 Tab With Icons

js
import React, { useState } from "react";
import { CDBNav, CDBTabLink, CDBTabContent, CDBTabPane, CDBContainer, CDBIcon } from "cdbreact";
const Tabs = () => {
const [item1, setItem1] = useState("1");
const toggle = (tab) => {
if (item1 !== tab) {
setItem1(tab)
}
};
return (
<CDBContainer>
<CDBNav className="nav-tabs mt-5 nav-justified">
<CDBTabLink
link
to="#"
active={item1 === "1"}
onClick={() => toggle("1")}
role="tab"
>
<CDBIcon icon="bomb" className="mr-2" />
Label 1
</CDBTabLink>
<CDBTabLink
link
to="#"
active={item1 === "2"}
onClick={() => toggle("2")}
role="tab"
>
<CDBIcon icon="bomb" className="mr-2" />
Label 2
</CDBTabLink>
<CDBTabLink
link
to="#"
active={item1 === "3"}
onClick={() => toggle("3")}
role="tab"
>
<CDBIcon icon="bomb" className="mr-2" />
Label 3
</CDBTabLink>
</CDBNav>
<CDBTabContent activeItem={item1}>
<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>
);
};
export default Tabs;

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.

API Reference: Contrast React Bootstrap 5 Tab Content Properties

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

NameTypeDefaultDescriptionExample
classNameStringSets custom classes, use class card to achieve card-like effect (you can use Card subcomponents inside)<CDBTabContent className="card" ... />
activeItemAnyActive TabPane id - use this prop to control the component<CDBTabContent activeItem="activeTab" ... />

API Reference: Contrast React Bootstrap 5 Tab Pane Properties

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

NameTypeDefaultDescriptionExample
classNameStringSets custom classes<CDBTabPane className="customClass" ... />
tabIdAnyIndicates active pane<CDBTabPane tabId="Tab1" ... />

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help reduce the amount of time we spend doing that, so we can focus on building some other aspects of the project. Contrast Bootstrap PRO consists of a UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Download the free react template

ad-banner

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast