Dropdowns
Use the tab JavaScript plugin—include it individually or through the compiled file—to extend our navigational tabs and pills to create tabbable panes of local content.
Custom Tabs
Custom styled tabs nav for copygen..
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur cupiditate dolorem ipsa sequi rerum suscipit, tenetur exercitationem debitis! Incidunt obcaecati dolorem, mollitia est quaerat dignissimos amet placeat soluta eaque quas.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur cupiditate dolorem ipsa sequi rerum suscipit, tenetur exercitationem debitis! Incidunt obcaecati dolorem, mollitia est quaerat dignissimos amet placeat soluta eaque quas.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur cupiditate dolorem ipsa sequi rerum suscipit, tenetur exercitationem debitis! Incidunt obcaecati dolorem, mollitia est quaerat dignissimos amet placeat soluta eaque quas.
'use client';
import {Tab} from 'react-bootstrap';
import {Tabs} from 'react-bootstrap';
export default function Example() {
return (
<Tabs
defaultActiveKey="profile"
className="mb-3 nav-tabs-s1"
>
<Tab eventKey="home" title="Home">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut exercitationem dicta doloremque excepturi consectetur ipsa error
nemo, dolor ad iste harum itaque, cum ipsam nihil deleniti accusamus, blanditiis libero repellat!
</Tab>
<Tab eventKey="profile" title="Profile">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut exercitationem dicta doloremque excepturi consectetur ipsa error
nemo, dolor ad iste harum itaque, cum ipsam nihil deleniti accusamus, blanditiis libero repellat!
</Tab>
<Tab eventKey="contact" title="Contact" disabled>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut exercitationem dicta doloremque excepturi consectetur ipsa error
nemo, dolor ad iste harum itaque, cum ipsam nihil deleniti accusamus, blanditiis libero repellat!
</Tab>
</Tabs>
);
}
Default Tab
Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur cupiditate dolorem ipsa sequi rerum suscipit, tenetur exercitationem debitis! Incidunt obcaecati dolorem, mollitia est quaerat dignissimos amet placeat soluta eaque quas.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur cupiditate dolorem ipsa sequi rerum suscipit, tenetur exercitationem debitis! Incidunt obcaecati dolorem, mollitia est quaerat dignissimos amet placeat soluta eaque quas.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur cupiditate dolorem ipsa sequi rerum suscipit, tenetur exercitationem debitis! Incidunt obcaecati dolorem, mollitia est quaerat dignissimos amet placeat soluta eaque quas.
'use client';
import {Tab} from 'react-bootstrap';
import {Tabs} from 'react-bootstrap';
export default function Example() {
return (
<Tabs
defaultActiveKey="profile"
className="mb-3"
>
<Tab eventKey="home" title="Home">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut exercitationem dicta doloremque excepturi consectetur ipsa error
nemo, dolor ad iste harum itaque, cum ipsam nihil deleniti accusamus, blanditiis libero repellat!
</Tab>
<Tab eventKey="profile" title="Profile">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut exercitationem dicta doloremque excepturi consectetur ipsa error
nemo, dolor ad iste harum itaque, cum ipsam nihil deleniti accusamus, blanditiis libero repellat!
</Tab>
<Tab eventKey="contact" title="Contact" disabled>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut exercitationem dicta doloremque excepturi consectetur ipsa error
nemo, dolor ad iste harum itaque, cum ipsam nihil deleniti accusamus, blanditiis libero repellat!
</Tab>
</Tabs>
);
}
Tabs Pills
The tabs also works with pills.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut exercitationem dicta doloremque excepturi consectetur ipsa error nemo, dolor ad iste harum itaque, cum ipsam nihil deleniti accusamus, blanditiis libero repellat!
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut exercitationem dicta doloremque excepturi consectetur ipsa error nemo, dolor ad iste harum itaque, cum ipsam nihil deleniti accusamus, blanditiis libero repellat!
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut exercitationem dicta doloremque excepturi consectetur ipsa error nemo, dolor ad iste harum itaque, cum ipsam nihil deleniti accusamus, blanditiis libero repellat!
'use client';
import { Nav, Tab } from 'react-bootstrap';
export default function Example() {
return (
<Tab.Container id="left-tabs-example" defaultActiveKey="first">
<Nav variant="pills" className="mb-3">
<Nav.Item>
<Nav.Link eventKey="first">Home</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="second">Profile</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="third">Contact</Nav.Link>
</Nav.Item>
</Nav>
<Tab.Content>
<Tab.Pane eventKey="first">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut exercitationem dicta doloremque excepturi consectetur ipsa error
nemo, dolor ad iste harum itaque, cum ipsam nihil deleniti accusamus, blanditiis libero repellat!
</Tab.Pane>
<Tab.Pane eventKey="second">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut exercitationem dicta doloremque excepturi consectetur ipsa error
nemo, dolor ad iste harum itaque, cum ipsam nihil deleniti accusamus, blanditiis libero repellat!
</Tab.Pane>
<Tab.Pane eventKey="third">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut exercitationem dicta doloremque excepturi consectetur ipsa error
nemo, dolor ad iste harum itaque, cum ipsam nihil deleniti accusamus, blanditiis libero repellat!
</Tab.Pane>
</Tab.Content>
</Tab.Container>
);
}
Vertical pills
The tabs also works with pills.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ab recusandae error architecto ea quos magnam culpa aliquid officiis quidem accusamus eius illum veritatis, facilis vero sit aliquam. Sed, odit est. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ab recusandae error architecto ea quos magnam culpa aliquid officiis quidem accusamus eius illum veritatis, facilis vero sit aliquam. Sed, odit est. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ab recusandae error architecto ea quos magnam culpa aliquid officiis quidem accusamus eius illum veritatis, facilis vero sit aliquam. Sed, odit est. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ab recusandae error architecto ea quos magnam culpa aliquid officiis quidem accusamus eius illum veritatis, facilis vero sit aliquam. Sed, odit est.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ab recusandae error architecto ea quos magnam culpa aliquid officiis quidem accusamus eius illum veritatis, facilis vero sit aliquam. Sed, odit est. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ab recusandae error architecto ea quos magnam culpa aliquid officiis quidem accusamus eius illum veritatis, facilis vero sit aliquam. Sed, odit est. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ab recusandae error architecto ea quos magnam culpa aliquid officiis quidem accusamus eius illum veritatis, facilis vero sit aliquam. Sed, odit est. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ab recusandae error architecto ea quos magnam culpa aliquid officiis quidem accusamus eius illum veritatis, facilis vero sit aliquam. Sed, odit est.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ab recusandae error architecto ea quos magnam culpa aliquid officiis quidem accusamus eius illum veritatis, facilis vero sit aliquam. Sed, odit est. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ab recusandae error architecto ea quos magnam culpa aliquid officiis quidem accusamus eius illum veritatis, facilis vero sit aliquam. Sed, odit est. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ab recusandae error architecto ea quos magnam culpa aliquid officiis quidem accusamus eius illum veritatis, facilis vero sit aliquam. Sed, odit est. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ab recusandae error architecto ea quos magnam culpa aliquid officiis quidem accusamus eius illum veritatis, facilis vero sit aliquam. Sed, odit est.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ab recusandae error architecto ea quos magnam culpa aliquid officiis quidem accusamus eius illum veritatis, facilis vero sit aliquam. Sed, odit est. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ab recusandae error architecto ea quos magnam culpa aliquid officiis quidem accusamus eius illum veritatis, facilis vero sit aliquam. Sed, odit est. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ab recusandae error architecto ea quos magnam culpa aliquid officiis quidem accusamus eius illum veritatis, facilis vero sit aliquam. Sed, odit est. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ab recusandae error architecto ea quos magnam culpa aliquid officiis quidem accusamus eius illum veritatis, facilis vero sit aliquam. Sed, odit est.
'use client';
import { Col, Nav, Row, Tab } from 'react-bootstrap';
export default function Example() {
return (
<Tab.Container id="left-tabs-example" defaultActiveKey="first">
<Row>
<Col sm={2}>
<Nav variant="pills" className="flex-column">
<Nav.Item>
<Nav.Link eventKey="first">Home</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="second">Profile</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="third" disabled>
Disabled
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="forth">Settings</Nav.Link>
</Nav.Item>
</Nav>
</Col>
<Col sm={10}>
<Tab.Content>
<Tab.Pane eventKey="first">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ab recusandae error architecto ea quos magnam culpa aliquid
officiis quidem accusamus eius illum veritatis, facilis vero sit aliquam. Sed, odit est. Lorem ipsum dolor sit, amet
consectetur adipisicing elit. Ab recusandae error architecto ea quos magnam culpa aliquid officiis quidem accusamus eius
illum veritatis, facilis vero sit aliquam. Sed, odit est. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ab
recusandae error architecto ea quos magnam culpa aliquid officiis quidem accusamus eius illum veritatis, facilis vero
sit aliquam. Sed, odit est. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ab recusandae error architecto
ea quos magnam culpa aliquid officiis quidem accusamus eius illum veritatis, facilis vero sit aliquam. Sed, odit est.
</Tab.Pane>
<Tab.Pane eventKey="second">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ab recusandae error architecto ea quos magnam culpa aliquid
officiis quidem accusamus eius illum veritatis, facilis vero sit aliquam. Sed, odit est. Lorem ipsum dolor sit, amet
consectetur adipisicing elit. Ab recusandae error architecto ea quos magnam culpa aliquid officiis quidem accusamus eius
illum veritatis, facilis vero sit aliquam. Sed, odit est. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ab
recusandae error architecto ea quos magnam culpa aliquid officiis quidem accusamus eius illum veritatis, facilis vero
sit aliquam. Sed, odit est. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ab recusandae error architecto
ea quos magnam culpa aliquid officiis quidem accusamus eius illum veritatis, facilis vero sit aliquam. Sed, odit est.
</Tab.Pane>
<Tab.Pane eventKey="third">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ab recusandae error architecto ea quos magnam culpa aliquid
officiis quidem accusamus eius illum veritatis, facilis vero sit aliquam. Sed, odit est. Lorem ipsum dolor sit, amet
consectetur adipisicing elit. Ab recusandae error architecto ea quos magnam culpa aliquid officiis quidem accusamus eius
illum veritatis, facilis vero sit aliquam. Sed, odit est. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ab
recusandae error architecto ea quos magnam culpa aliquid officiis quidem accusamus eius illum veritatis, facilis vero
sit aliquam. Sed, odit est. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ab recusandae error architecto
ea quos magnam culpa aliquid officiis quidem accusamus eius illum veritatis, facilis vero sit aliquam. Sed, odit est.
</Tab.Pane>
<Tab.Pane eventKey="forth">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ab recusandae error architecto ea quos magnam culpa aliquid
officiis quidem accusamus eius illum veritatis, facilis vero sit aliquam. Sed, odit est. Lorem ipsum dolor sit, amet
consectetur adipisicing elit. Ab recusandae error architecto ea quos magnam culpa aliquid officiis quidem accusamus eius
illum veritatis, facilis vero sit aliquam. Sed, odit est. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ab
recusandae error architecto ea quos magnam culpa aliquid officiis quidem accusamus eius illum veritatis, facilis vero
sit aliquam. Sed, odit est. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ab recusandae error architecto
ea quos magnam culpa aliquid officiis quidem accusamus eius illum veritatis, facilis vero sit aliquam. Sed, odit est.
</Tab.Pane>
</Tab.Content>
</Col>
</Row>
</Tab.Container>
);
}