JollyUI
  1. Docs
  2. components
  3. Tabs

Tabs

Tabs organize content into multiple sections and allow users to navigate between them.

Installation

npx @sly-cli/sly add jolly-ui tabs

Examples

Basic

Content

Focus

Dynamic items

Orientation

Disabled

Disabled Items

In dynamic collections, it may be more convenient to use the disabledKeys prop at the Tabs level instead of isDisabled on individual tabs. Each key in this list corresponds with the id prop passed to the Tab component, or automatically derived from the values passed to the items prop (see the Collections for more details). A tab is considered disabled if its id exists in disabledKeys or if it has isDisabled.