React Bootstrap Tabs Component
Tabs with Bootstrap Styling
Bootstrap 5 components designed for React.js
This component is part of the CoreUI for React.js UI components library, which offers all Bootstrap components designed to work seamlessly with React.js.
If you want to use Bootstrap 5 in a React.js environment while also needing advanced components that Bootstrap does not offer and dedicated developer support, then this library is the best solution for you.
Learn how to create tabbed navigation interfaces in React using CoreUI's components styled like Bootstrap tabs and pills.
How to use React Bootstrap Tabs component#
Use CoreUI's React tabs styled with Bootstrap to organize content into multiple sections that users can switch between using tabs or pills.
Tabs style#
The default variant="tabs" creates traditional Bootstrap-style tabbed navigation.
Unstyled#
Without the variant prop, tabs render with minimal default styles.
Pills style#
Use variant="pills" to display tabs styled like Bootstrap pills.
Underline style#
Use variant="underline" to show a bottom border underline beneath the active tab.
Underline border#
Use variant="underline-border" to show a full underline across the width of the tab.
Fill and justify#
Use layout="fill" or layout="justified" to control how tabs stretch to fill the horizontal space.
Controlled tabs#
Use activeItemKey and onChange to fully control the active tab from your component state.
Accessibility#
CoreUI's Tabs component automatically manages aria- and role="..." attributes to match Bootstrap and WAI-ARIA accessibility guidelines for tabs.
API reference#
Refer to the API documentation for detailed descriptions of all available props and usage patterns.