ClayTabs component

Usage no npm install needed!

<script type="module">
  import clayuiTabs from 'https://cdn.skypack.dev/@clayui/tabs';


title: 'Tabs' description: 'Tabs organize similar content together into individual sections in the same page.' lexiconDefinition: 'https://liferay.design/lexicon/core-components/tabs/' packageNpm: '@clayui/tabs'

import {Tabs, TabsDropdown} from '$packages/clay-tabs/docs/index';


ClayTabs is a controlled component, we left this component controlled because the user can use Dropdowns or another control to select a TabPane for render. Just creating states to manage it.

For the modern variant of Tabs use the modern property. If you need to justify the text inside the ClayTabs.Item, use the justified property.

Use ClayTabs.Item for defining a TabPane's trigger. For using this trigger as an anchor element, just define href property, otherwise, the trigger will be a button. Use ClayTabs.TabPane for wrapping the content that will be rendered by TabPane as the following example:

Dropdown Tabs

As a controlled component, Tabs allows you to control the active TabPane. Thereby, we can select the active TabPane by a Dropdown menu. For example:


Note that ClayTabs.TabPanel is an alias to ClayTabs.TabPane. The two are interchangeable.