Tabs is a component that makes navigating between sections of related content possible, displaying one section at a time.
Use Tabs if the content can be separated into sections that make sense as standalone pieces of information.
Be aware that the users will not see all the content at the same time. Make sure the first section is the most relevant one.
Import
import { Tabs } from '@contentful/f36-components';
import { Tabs } from '@contentful/f36-tabs';
Examples
Basic
With divider
By default, Tabs
has no divider, but you can add it by providing variant
prop to the Tabs.List
With vertical divider:
With horizontal divider:
With default open tab
With disabled tab
Controlled Tabs
By default, Tabs
is an uncontrolled component, but you can make it controlled by providing currentTab
and onTabChange
props.
Controlled Tabs with always mounted Tabs.Panel
By default, Tabs.Panel
is unmounted, if it's not an active tab. But you can make it always mounted by passing the forceMount
prop.
Keep in mind that you have to provide additional styles to hide not active Tabs.Panel
.
Props (API reference)
Tabs
Tab
TabPanel
TabList
Content guidelines
- every
Tab
should have concise copy - all content within a Tab should be related to it's label
- to ensure an optimal cognitive load for users, do not use more than six (6) Tabs at any given time