Dynamic tabbed interfaces
Examples
Create dynamic tabbed interfaces, as described in the
WAI ARIA Authoring Practices.
Tabs is a higher-level component for quickly creating a
Nav matched with a set of TabPanes.
import Tab from 'react-bootstrap/Tab';
import Tabs from 'react-bootstrap/Tabs';
function UncontrolledExample() {
return (
<Tabs
defaultActiveKey="profile"
id="uncontrolled-tab-example"
className="mb-3"
>
<Tab eventKey="home" title="Home">
Tab content for Home
</Tab>
<Tab eventKey="profile" title="Profile">
Tab content for Profile
</Tab>
<Tab eventKey="contact" title="Contact" disabled>
Tab content for Contact
</Tab>
</Tabs>
);
}
export default UncontrolledExample;
Controlled
Tabs can be controlled directly when you want to handle the
selection logic personally.
import { useState } from 'react';
import Tab from 'react-bootstrap/Tab';
import Tabs from 'react-bootstrap/Tabs';
function ControlledTabsExample() {
const [key, setKey] = useState('home');
return (
<Tabs
id="controlled-tab-example"
activeKey={key}
onSelect={(k) => setKey(k)}
className="mb-3"
>
<Tab eventKey="home" title="Home">
Tab content for Home
</Tab>
<Tab eventKey="profile" title="Profile">
Tab content for Profile
</Tab>
<Tab eventKey="contact" title="Contact" disabled>
Tab content for Contact
</Tab>
</Tabs>
);
}
export default ControlledTabsExample;
No animation
Set the transition prop to false.
import Tab from 'react-bootstrap/Tab';
import Tabs from 'react-bootstrap/Tabs';
function NoAnimationExample() {
return (
<Tabs
defaultActiveKey="home"
transition={false}
id="noanim-tab-example"
className="mb-3"
>
<Tab eventKey="home" title="Home">
Tab content for Home
</Tab>
<Tab eventKey="profile" title="Profile">
Tab content for Profile
</Tab>
<Tab eventKey="contact" title="Contact" disabled>
Tab content for Contact
</Tab>
</Tabs>
);
}
export default NoAnimationExample;
Fill and justify
Similar to the Nav component, you can force the contents of your Tabs to extend the full available width. To
proportionately fill the space use fill. Notice that the
Tabs is the entire width but each Tab item is a different size.
import Tab from 'react-bootstrap/Tab';
import Tabs from 'react-bootstrap/Tabs';
function FillExample() {
return (
<Tabs
defaultActiveKey="profile"
id="fill-tab-example"
className="mb-3"
fill
>
<Tab eventKey="home" title="Home">
Tab content for Home
</Tab>
<Tab eventKey="profile" title="Profile">
Tab content for Profile
</Tab>
<Tab eventKey="longer-tab" title="Loooonger Tab">
Tab content for Loooonger Tab
</Tab>
<Tab eventKey="contact" title="Contact" disabled>
Tab content for Contact
</Tab>
</Tabs>
);
}
export default FillExample;
If you want each Tab to be the same size use justify.
import Tab from 'react-bootstrap/Tab';
import Tabs from 'react-bootstrap/Tabs';
function JustifiedExample() {
return (
<Tabs
defaultActiveKey="profile"
id="justify-tab-example"
className="mb-3"
justify
>
<Tab eventKey="home" title="Home">
Tab content for Home
</Tab>
<Tab eventKey="profile" title="Profile">
Tab content for Profile
</Tab>
<Tab eventKey="longer-tab" title="Loooonger Tab">
Tab content for Loooonger Tab
</Tab>
<Tab eventKey="contact" title="Contact" disabled>
Tab content for Contact
</Tab>
</Tabs>
);
}
export default JustifiedExample;
Dropdowns?
Dynamic tabbed interfaces should not contain dropdown menus, as this
causes both usability and accessibility issues. From a usability
perspective, the fact that the currently displayed tab’s trigger element
is not immediately visible (as it’s inside the closed dropdown menu) can
cause confusion. From an accessibility point of view, there is currently
no sensible way to map this sort of construct to a standard WAI ARIA
pattern, meaning that it cannot be easily made understandable to users
of assistive technologies.
That said, it Dropdowns do work technically (sans focus management), but
we don't make any claims about support.
Custom Tab Layout
For more complex layouts the flexible TabContainer,
TabContent, and TabPane components along with any
style of Nav allow you to quickly piece together your own Tabs
component with additional markup needed.
Create a set of NavItems each with an eventKey
corresponding to the eventKey of a TabPane. Wrap the whole
thing in a TabContainer and you have fully functioning
custom tabs component. Check out the below example making use of the
grid system, pills and underline.
Pills
import Col from 'react-bootstrap/Col';
import Nav from 'react-bootstrap/Nav';
import Row from 'react-bootstrap/Row';
import Tab from 'react-bootstrap/Tab';
function LeftTabsExample() {
return (
<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">First tab content</Tab.Pane>
<Tab.Pane eventKey="second">Second tab content</Tab.Pane>
</Tab.Content>
</Col>
</Row>
</Tab.Container>
);
}
export default LeftTabsExample;
API
Tabs
Tab
TabContainer
TabContent
TabPane