Tabs

1 min readStableBeginner

The Tabs component organizes content into tabbed panels. Tab selections can be synced across pages with syncKey.

Quick Start

Two tabs with a default selection.

React uses a virtual DOM and JSX syntax for building user interfaces.

Three tabs covering more frameworks.

React uses a virtual DOM and JSX syntax.

Use syncKey to persist the selection across pages.

npm install next

defaultValuestringDefault: first tab

Value of the initially active tab.

syncKeystring

Persists the selected tab across pages via localStorage.

childrenReactNoderequired

One or more TabItem components.

valuestringrequired

Unique identifier for the tab.

labelstringrequired

Display text on the tab button.

childrenReactNoderequired

Content shown when the tab is active.

Was this page helpful?