Skip to main content

Pivotal UI

v19.2.2

Tabs

Tabs are a navigation element used in web design that allow users to easily access different areas of a site or different parts of an individual page.

They’re like tabbed dividers in a filing cabinet – by clicking a tab, users can easily locate a view of related content. Tabs should be used for alternating between views within the same context, not to navigate to different areas.

Using Tab components in React consists of a parent element for the desired Tab type (for example, Tabs or LeftTabs). Each Tab is a child of this parent element and has a tab property for the string value a Tab should display.

Additionally, each Tab must define an eventKey property for uniquely identifying this tab to its parent component.

Do'sDon'ts
Use tabs to group content, connect related information, and as a tool to save space.Don’t use tabs when it’s more meaningful for the user to see related content grouped together
Information needs to be highly scannable and simple to navigate helps aid users in locating specific information they need.When content is sequential it may make more sense to have content grouped and scrollable
When a user would like to access each group of information separately.When it makes more sense to have users scan the page then hide content
Tabs
ReferenceError: React is not defined
Left tabs
ReferenceError: React is not defined
Responsive breakpoints

Tabs can be responsive, and will display accordion-style on small screens and folder-style on large screens.

ReferenceError: React is not defined

Props

Tabs props

PropertyRequiredTypeDefaultDescription
actionsnoNodeAn element or text that will display in the upper right
animationnoBooleanfalseWhether to animate when moving between tabs, defaults to true
defaultActiveKeynoAnyThe tab which will start out open. This should equal one of your tab's event keys
largeScreenClassNamenoStringWill be applied to large screen tabs only
onSelectnoFunctionWill override default behavior when clicking on a tab. If you want to retain the default behavior as well as add new functionality, change default active key in the function you provide
responsiveBreakpointnooneOf('xs', 'sm', 'md', 'lg')The size at which the small-screen tabs (accordion-style) should switch to large-screen tabs (folder-style)
smallScreenClassNamenoStringWill be applied to small screen tabs only
tabTypenooneOf('simple', 'left')'simple'Use 'left' to have the tabs stacked to the left

Tab props

PropertyRequiredTypeDefaultDescription
aria-labelledbynoStringOverwrite the default aria-labelledby for the tab for more specific accessibility information
classNamenoStringClassName to add to the tab content
disablednoBooleanfalseIf true, disable the tab
eventKeynoAnydata representing the tab, to be used with defaultActiveKey or onSelect
onEnterednoFunctionA function that gets called with the eventKey on entering a tab once animations have finished
onExitednoFunctionA function that gets called with the eventKey on exiting a tab once animations have finished
tabClassNamenoStringclassName to add to the tab link
titleyesNodeText or an element rendered in the tab link

LeftTabs props

PropertyRequired?TypeDescriptionDefault
tabWidthnonumberThe amount of FlexCol growth for the tabs3

Imports

Import React components (including CSS):

import {Tab, Tabs, LeftTabs} from 'pivotal-ui/react/tabs';

Import CSS only:

import 'pivotal-ui/css/tabs';