Tabs

Horizontally or vertically stacked list of items. When clicked each item switch content in the tab pane.

Button-like style

This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other.nav-powered navigation.

This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other.nav-powered navigation.

This is some placeholder content the Disabled tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other.nav-powered navigation.

'use client'

import Nav from 'react-bootstrap/Nav'
import NavItem from 'react-bootstrap/NavItem'
import NavLink from 'react-bootstrap/NavLink'
import Tabs from 'react-bootstrap/Tabs'
import Tab from 'react-bootstrap/Tab'
import TabContainer from 'react-bootstrap/TabContainer'
import TabContent from 'react-bootstrap/TabContent'
import TabPane from 'react-bootstrap/TabPane'

export default function TabsButtonStyleDemo() {
  return (
    <>
      <TabContainer defaultActiveKey="home">
        <Nav variant="tabs" className="mb-3" style={{ maxWidth: 450 }}>
          <NavItem>
            <NavLink eventKey="home">Home</NavLink>
          </NavItem>
          <NavItem>
            <NavLink eventKey="profile">Profile</NavLink>
          </NavItem>
          <NavItem>
            <NavLink eventKey="contact">Contact</NavLink>
          </NavItem>
          <NavItem>
            <NavLink eventKey="disabled" disabled>Disabled</NavLink>
          </NavItem>
        </Nav>
        <TabContent>
          <TabPane eventKey="home">
            This is some placeholder content the <strong>Home tab&apos;s</strong> associated content. Clicking another
            tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the
            content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered
            navigation.
          </TabPane>
          <TabPane eventKey="profile">
            This is some placeholder content the <strong>Profile tab&apos;s</strong> associated content. Clicking
            another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
            control the content visibility and styling. You can use it with tabs, pills, and any other
            <code>.nav</code>-powered navigation.
          </TabPane>
          <TabPane eventKey="contact">
            This is some placeholder content the <strong>Contact tab&apos;s</strong> associated content. Clicking
            another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
            control the content visibility and styling. You can use it with tabs, pills, and any other
            <code>.nav</code>-powered navigation.
          </TabPane>
          <TabPane eventKey="disabled">
            This is some placeholder content the <strong>Disabled tab&apos;s</strong> associated content. Clicking
            another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
            control the content visibility and styling. You can use it with tabs, pills, and any other
            <code>.nav</code>-powered navigation.
          </TabPane>
        </TabContent>
      </TabContainer>


      {/* Using Tabs shorthand */}
      <Tabs defaultActiveKey="home" className="mb-3" style={{ maxWidth: 450 }}>
        <Tab eventKey="home" title="Home">
          This is some placeholder content the <strong>Home tab&apos;s</strong> associated content. Clicking another
          tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the
          content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered
          navigation.
        </Tab>
        <Tab eventKey="profile" title="Profile">
          This is some placeholder content the <strong>Profile tab&apos;s</strong> associated content. Clicking
          another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control
          the content visibility and styling. You can use it with tabs, pills, and any other
          <code>.nav</code>-powered navigation.
        </Tab>
        <Tab eventKey="contact" title="Contact">
          This is some placeholder content the <strong>Contact tab&apos;s</strong> associated content. Clicking
          another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control
          the content visibility and styling. You can use it with tabs, pills, and any other
          <code>.nav</code>-powered navigation.
        </Tab>
        <Tab eventKey="disabled" title="Disabled" disabled>
          This is some placeholder content the <strong>Disabled tab&apos;s</strong> associated content. Clicking
          another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control
          the content visibility and styling. You can use it with tabs, pills, and any other
          <code>.nav</code>-powered navigation.
        </Tab>
      </Tabs>
    </>
  )
}

Underline style

'use client'

import Nav from 'react-bootstrap/Nav'
import NavItem from 'react-bootstrap/NavItem'
import NavLink from 'react-bootstrap/NavLink'
import TabContainer from 'react-bootstrap/TabContainer'
import TabContent from 'react-bootstrap/TabContent'
import TabPane from 'react-bootstrap/TabPane'

export default function TabsUnderlineStyleDemo() {
  return (
    <TabContainer defaultActiveKey="home">
      <Nav variant="underline" className="mb-3">
        <NavItem>
          <NavLink eventKey="home">Home</NavLink>
        </NavItem>
        <NavItem>
          <NavLink eventKey="profile">Profile</NavLink>
        </NavItem>
        <NavItem>
          <NavLink eventKey="contact">Contact</NavLink>
        </NavItem>
        <NavItem>
          <NavLink eventKey="disabled" disabled>Disabled</NavLink>
        </NavItem>
      </Nav>
      <TabContent>
        <TabPane eventKey="home">
          This is some placeholder content the <strong>Home tab&apos;s</strong> associated content. Clicking another
          tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the
          content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered
          navigation.
        </TabPane>
        <TabPane eventKey="profile">
          This is some placeholder content the <strong>Profile tab&apos;s</strong> associated content. Clicking
          another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
          control the content visibility and styling. You can use it with tabs, pills, and any other
          <code>.nav</code>-powered navigation.
        </TabPane>
        <TabPane eventKey="contact">
          This is some placeholder content the <strong>Contact tab&apos;s</strong> associated content. Clicking
          another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
          control the content visibility and styling. You can use it with tabs, pills, and any other
          <code>.nav</code>-powered navigation.
        </TabPane>
        <TabPane eventKey="disabled">
          This is some placeholder content the <strong>Disabled tab&apos;s</strong> associated content. Clicking
          another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
          control the content visibility and styling. You can use it with tabs, pills, and any other
          <code>.nav</code>-powered navigation.
        </TabPane>
      </TabContent>
    </TabContainer>
  )
}

Vertical alignment

'use client'

import Stack from 'react-bootstrap/Stack'
import Nav from 'react-bootstrap/Nav'
import NavItem from 'react-bootstrap/NavItem'
import NavLink from 'react-bootstrap/NavLink'

export default function TabsVerticalDemo() {
  return (
    <Stack direction="horizontal" gap={5}>

      {/* Button style tabs */}
      <Nav variant="tabs" defaultActiveKey="home" className="flex-column mb-3" style={{ width: 150 }}>
        <NavItem>
          <NavLink eventKey="home">Home</NavLink>
        </NavItem>
        <NavItem>
          <NavLink eventKey="profile">Profile</NavLink>
        </NavItem>
        <NavItem>
          <NavLink eventKey="contact">Contact</NavLink>
        </NavItem>
        <NavItem>
          <NavLink eventKey="disabled" disabled>Disabled</NavLink>
        </NavItem>
      </Nav>

      {/* Underline style tabs */}
      <Nav variant="underline" defaultActiveKey="home" className="flex-column">
        <NavItem>
          <NavLink eventKey="home">Home</NavLink>
        </NavItem>
        <NavItem>
          <NavLink eventKey="profile">Profile</NavLink>
        </NavItem>
        <NavItem>
          <NavLink eventKey="contact">Contact</NavLink>
        </NavItem>
        <NavItem>
          <NavLink eventKey="disabled" disabled>Disabled</NavLink>
        </NavItem>
      </Nav>
    </Stack>
  )
}

With icons

'use client'

import Stack from 'react-bootstrap/Stack'
import Nav from 'react-bootstrap/Nav'
import NavItem from 'react-bootstrap/NavItem'
import NavLink from 'react-bootstrap/NavLink'

export default function TabsIconsDemo() {
  return (
    <Stack direction="vertical" gap={4} style={{ maxWidth: 500 }}>

      {/* Button style tabs */}
      <Nav variant="tabs" defaultActiveKey="home">
        <NavItem>
          <NavLink eventKey="home">
            <i className="ci-home me-2 ms-n1"/>
            Home
          </NavLink>
        </NavItem>
        <NavItem>
          <NavLink eventKey="profile">
            <i className="ci-user me-2 ms-n1"/>
            Profile
          </NavLink>
        </NavItem>
        <NavItem>
          <NavLink eventKey="messages">
            <i className="ci-message-square me-2 ms-n1"/>
            Messages
          </NavLink>
        </NavItem>
        <NavItem>
          <NavLink eventKey="settings">
            <i className="ci-settings me-2 ms-n1"/>
            Settings
          </NavLink>
        </NavItem>
      </Nav>

      {/* Underline style tabs */}
      <Nav variant="underline" defaultActiveKey="home">
        <NavItem>
          <NavLink eventKey="home">
            <i className="ci-home me-2 ms-n1"/>
            Home
          </NavLink>
        </NavItem>
        <NavItem>
          <NavLink eventKey="profile">
            <i className="ci-user me-2 ms-n1"/>
            Profile
          </NavLink>
        </NavItem>
        <NavItem>
          <NavLink eventKey="messages">
            <i className="ci-message-square me-2 ms-n1"/>
            Messages
          </NavLink>
        </NavItem>
        <NavItem>
          <NavLink eventKey="settings">
            <i className="ci-settings me-2 ms-n1"/>
            Settings
          </NavLink>
        </NavItem>
      </Nav>
    </Stack>
  )
}

Shapes

'use client'

import Stack from 'react-bootstrap/Stack'
import Nav from 'react-bootstrap/Nav'
import NavItem from 'react-bootstrap/NavItem'
import NavLink from 'react-bootstrap/NavLink'

export default function TabsShapesDemo() {
  return (
    <Stack direction="vertical" gap={4} style={{ maxWidth: 450 }}>
      {/* Rounded (default) tabs */}
      <Nav variant="tabs" defaultActiveKey="home">
        <NavItem>
          <NavLink eventKey="home">Home</NavLink>
        </NavItem>
        <NavItem>
          <NavLink eventKey="profile">Profile</NavLink>
        </NavItem>
        <NavItem>
          <NavLink eventKey="Contact">Contact</NavLink>
        </NavItem>
        <NavItem>
          <NavLink eventKey="disabled" disabled>Disabled</NavLink>
        </NavItem>
      </Nav>

      {/* Pill shaped tabs */}
      <Nav variant="tabs" defaultActiveKey="home" className="rounded-pill">
        <NavItem>
          <NavLink eventKey="home" className="rounded-pill">
            Home
          </NavLink>
        </NavItem>
        <NavItem>
          <NavLink eventKey="profile" className="rounded-pill">
            Profile
          </NavLink>
        </NavItem>
        <NavItem>
          <NavLink eventKey="Contact" className="rounded-pill">
            Contact
          </NavLink>
        </NavItem>
        <NavItem>
          <NavLink eventKey="disabled" className="rounded-pill" disabled>
            Disabled
          </NavLink>
        </NavItem>
      </Nav>

      {/* Square shaped tabs */}
      <Nav variant="tabs" defaultActiveKey="home" className="rounded-0">
        <NavItem>
          <NavLink eventKey="home" className="rounded-0">
            Home
          </NavLink>
        </NavItem>
        <NavItem>
          <NavLink eventKey="profile" className="rounded-0">
            Profile
          </NavLink>
        </NavItem>
        <NavItem>
          <NavLink eventKey="Contact" className="rounded-0">
            Contact
          </NavLink>
        </NavItem>
        <NavItem>
          <NavLink eventKey="disabled" className="rounded-0" disabled>
            Disabled
          </NavLink>
        </NavItem>
      </Nav>
    </Stack>
  )
}