The CoreUI React Tabs component provides a flexible and accessible way to create tabbed navigation in your application. It supports various styles and configurations to meet different design requirements.

Example#

The basic React tabs example uses thevariant="tabs" props to generate a tabbed interface.

Available styles#

Change the style of<CTabs>'s component with modifiers and utilities. Mix and match as needed, or build your own.

Unstyled#

If you don’t provide thevariant prop, the component will default to a basic style.

Pills#

Take that same code, but usevariant="pills" instead:

Underline#

Take that same code, but usevariant="underline" instead:

Underline border#

Take that same code, but usevariant="underline-border" instead:

Enclosed#

Use thevariant="enclosed" class to give your navigation items a subtle border and rounded styling.

Enclosed pills#

Use thevariant="enclosed-pills" to achieve a pill-style appearance for each nav item, using pill-shaped borders and smoother outlines.

Fill and justify#

Force your<CTabs>'s contents to extend the full available width one of two modifier classes. To proportionately fill all available space uselayout="fill". Notice that all horizontal space is occupied, but not every nav item has the same width.

For equal-width elements, uselayout="justified". All horizontal space will be occupied by nav links, but unlike thelayout="fill" above, every nav item will be the same width.

Sure! Here's a polished, production-readydocumentation section (Markdown-style) explaining thecontrolled usage of the<CTabs> component, with a clear example:

Controlled Tabs#

Use theactiveItemKey prop to control which tab is currently active. In this mode, the parent component is responsible for managing the active state and responding to user interactions via theonChange callback.

This is useful when you need to synchronize the tab state with your application logic, such as routing or complex UI state management.

Key Points

• activeItemKey sets the currently active tab.
• onChange receives the newitemKey when a tab is clicked.
• You must manually updateactiveItemKey in your state based ononChange.

💡 If you prefer the tabs to manage their own state, usedefaultActiveItemKey instead.

Accessibility#

Dynamic tabbed interfaces, as described in theWAIARIA Authoring Practices, requirerole="tablist",role="tab",role="tabpanel", and additionalaria- attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers).

WAI-ARIA Roles#

• The element that serves as the container for the set of tabs has the roletablist.
• Each element that serves as a tab has the roletab and is contained within the element with the roletablist.
• Each element that contains the content panel for a tab has the roletabpanel.
• If the tab list has a visible label, the element with the roletablist hasaria-labelledby set to a value that refers to the labeling element. Otherwise, thetablist element has a label provided byaria-label.
• Each element with the roletab has the propertyaria-controls referring to its associatedtabpanel element.
• The active tab element has the statearia-selected set totrue, and all other tab elements have it set tofalse.
• Each element with the roletabpanel has the propertyaria-labelledby referring to its associatedtab element.

Our React Tabs component automatically manages allrole="..." andaria- attributes for accessibility. It also handles the selected state by addingaria-selected="true" to the active tab. Additionally, you have the flexibility to manually set these attributes, as shown in the example below:

<CTabsactiveItemKey={2}>
<CTabListvariant="tabs">
<CTabid="home-tab"aria-controls="home-tab-pane"itemKey={1}>Home</CTab>
<CTabid="profile-tab"aria-controls="profile-tab-pane"itemKey={2}>Profile</CTab>
<CTabid="contact-tab"aria-controls="contact-tab-pane"itemKey={3}>Contact</CTab>
<CTabid="disabled-tab"aria-controls="disabled-tab-pane"disableditemKey={4}>Disabled</CTab>
</CTabList>
<CTabContent>
<CTabPanelid="home-tab-pane"className="p-3"aria-labelledby="home-tab-pane"aria-labelledby="home-tab"itemKey={1}>
      Home tab content
</CTabPanel>
<CTabPanelid="profile-tab-pane"className="p-3"aria-labelledby="profile-tab-pane"aria-labelledby="profile-tab"itemKey={2}>
      Profile tab content
</CTabPanel>
<CTabPanelid="contact-tab-pane"className="p-3"aria-labelledby="contact-tab-pane"aria-labelledby="contact-tab"itemKey={3}>
      Contact tab content
</CTabPanel>
<CTabPanelid="disabled-tab-pane"className="p-3"aria-labelledby="disabled-tab-pane"aria-labelledby="disabled-tab"itemKey={4}>
      Disabled tab content
</CTabPanel>
</CTabContent>
</CTabs>

This example demonstrates how to manually setaria-selected,aria-controls, andaria-labelledby attributes on your<CTab>'s and<CTabPanels>'s.

Keyboard Interaction#

When focus enters the tab list:

Tab: It places focus on the activetab element.

When focus is on a tab element:

Tab: Moves focus to the next element in the tab sequence, typically the tabpanel unless the first focusable element inside the tabpanel is found earlier.

Left Arrow: Moves focus to the previous tab. If on the first tab, it wraps around to the last tab.

Right Arrow: Moves focus to the next tab. If on the last tab, it wraps around to the first tab.

Home: Moves focus to the first tab.

End: Moves focus to the last tab.

API#

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

• <CTab />
• <CTabContent />
• <CTabList />
• <CTabPanel />
• <CTabs />