react bootstrap 5 tabs example

In this tutorial, we will see tabs in react with bootstrap 5. We will see tabs component, left side nav tabs using react bootstrap 5.

Install & Setup Vite + React + Typescript + Bootstrap 5

React Bootstrap 5 Tabs Example

1. Create simple react bootstrap tabs using react-bootstrap Tabs component.

import { Container } from "react-bootstrap";
import Tab from "react-bootstrap/Tab";
import Tabs from "react-bootstrap/Tabs";

export default function ExampleTab() {
  return (
    <Container>
      <Tabs
        defaultActiveKey="profile"
        id="uncontrolled-tab-example"
        className="mb-3"
      >
        <Tab eventKey="home" title="Home">
          React Bootstrap 5 Tab 1
        </Tab>
        <Tab eventKey="profile" title="Profile">
          React Bootstrap 5 Tab 2
        </Tab>
        <Tab eventKey="contact" title="Contact" disabled>
          React Bootstrap 5 Tab 3
        </Tab>
      </Tabs>
    </Container>
  );
}

react bootstrap 5 tabs

2. react bootstrap 5 no animation tabs.

import { Container } from "react-bootstrap";
import Tab from "react-bootstrap/Tab";
import Tabs from "react-bootstrap/Tabs";

export default function ExampleTab() {
  return (
    <Container>
      <Tabs
        defaultActiveKey="home"
        transition={false}
        id="noanim-tab-example"
        className="mb-3"
      >
        <Tab eventKey="home" title="Home">
          React Bootstrap 5 Tab 1
        </Tab>
        <Tab eventKey="profile" title="Profile">
          React Bootstrap 5 Tab 2
        </Tab>
        <Tab eventKey="contact" title="Contact" disabled>
          React Bootstrap 5 Tab 3
        </Tab>
      </Tabs>
    </Container>
  );
}

3. react bootstrap 5 tabs with Fill and justify.

import { Container } from "react-bootstrap";
import Tab from "react-bootstrap/Tab";
import Tabs from "react-bootstrap/Tabs";

export default function ExampleTab() {
  return (
    <Container>
      <Tabs
        defaultActiveKey="profile"
        id="fill-tab-example"
        className="mb-3"
        fill
      >
        <Tab eventKey="home" title="Home">
          React Bootstrap 5 Tab 1
        </Tab>
        <Tab eventKey="profile" title="Profile">
          React Bootstrap 5 Tab 2
        </Tab>
        <Tab eventKey="contact" title="Contact" disabled>
          React Bootstrap 5 Tab 3
        </Tab>
      </Tabs>
    </Container>
  );
}

react bootstrap 5 tabs fill justify

4. react bootstrap 5 left side nav tabs.

import { Container } from "react-bootstrap";
import Col from "react-bootstrap/Col";
import Nav from "react-bootstrap/Nav";
import Row from "react-bootstrap/Row";
import Tab from "react-bootstrap/Tab";

export default function ExampleTab() {
  return (
    <Container>
      <Tab.Container id="left-tabs-example" defaultActiveKey="first">
        <Row>
          <Col sm={3}>
            <Nav variant="pills" className="flex-column">
              <Nav.Item>
                <Nav.Link eventKey="first">Tab 1</Nav.Link>
              </Nav.Item>
              <Nav.Item>
                <Nav.Link eventKey="second">Tab 2</Nav.Link>
              </Nav.Item>
            </Nav>
          </Col>
          <Col sm={9}>
            <Tab.Content>
              <Tab.Pane eventKey="first">React Boostrap 5 tabs 1</Tab.Pane>
              <Tab.Pane eventKey="second">React Boostrap 5 tabs 2</Tab.Pane>
            </Tab.Content>
          </Col>
        </Row>
      </Tab.Container>
    </Container>
  );
}

react bootstrap 5 left side nav tabs