check
Code copied to clipboard.
close
menu

Tabs

The Tabs component is a wrapper component that maps the string of arrays you pass to its tablinks prop to a child TabMenu component. It renders child elements as 1 tab pane per direct child. The number of children passed to a Tabs component must equal the length of the tabLinks array.

Example Instance

<Tabs tabLinks={tabLabels} activeTab={activeTab} setActiveTab={setActiveTab}>
  {tabLabels.map((label, index) => (
    <TabContent key={index}>
      <p>This is the content for {label}</p>
    </TabContent>
  ))}
</Tabs>
content_copy
warning
Note: The above snippet omits import statements and surrounding markup. It's assumed you'd be pasting this inside the return block of an existing functional component.

Installation

Next.js

Note: Other React frameworks are not currently supported, but they might still work. Try at your own risk.

Method Instructions
LiftKit CLI
From any Next.js project, run the following command in your terminal.
npm run add tabs
content_copy
Github open_in_new View on Github

Props

Unique

Props unique to this component.

Name Required Type Description Default Val
onActiveTabChange no (index: number) => void Optional function to lift state when the active tab changes undefined
scrollableContent no boolean Enables scrollable tab content area undefined
tabLinks yes string[] Array of tab link labels

Common

Props with globally-defined behavior that are used in multiple components.

Common PropsStatus
{children}Supported
Native HTML attributesSupported