Skip to main contentSkip to search
Clay
  • Get Started
    • How to Use Clay
    • How to Read This Documentation
    • Composition Philosophy
    • Migrating From v2.x
    • Using Clay in JSPs
  • Components
    • Alert
    • Application Bar
    • Aspect Ratio
    • Autocomplete
    • Badge
    • Breadcrumb
    • Button Group
    • Buttons
    • Card
    • Chart
    • Color Picker
    • Data Provider
    • Date Picker
    • DropDown
    • Empty State
    • Form
      • Checkbox
      • Dual List Box
      • Input
      • Radio Group
      • Select
      • Select Box
      • Toggle Switch
    • Forms Hierarchy
    • Heading
    • Icon
    • Label
    • Layout
    • Link
    • List
    • Loading Indicator
    • Localized Input
    • Management Toolbar
    • Modal
    • Multi Select
    • Multi Step Nav
    • Nav
    • Navigation Bar
    • OverlayMask
    • Pagination
    • Pagination Bar
    • Panel
    • Picker
    • Popover
    • Progress Bar
    • Provider
    • Sidebar
    • Slider
    • Sticker
    • Table
    • Tabs
    • Text
    • Timelines
    • Time Picker
    • Toolbar
    • Tooltip
    • TreeView
    • Upper Toolbar
    • VerticalBar
    • Vertical Navigation
  • Contributing
  • CSS Framework
    • Paver
    • SCSS
    • Color
    • Grid
    • Content
      • Typography
      • C Kbd
    • Utilities
      • Accessibility
      • Autofit
      • Border
      • C Focus Inset
      • C Inner
      • Color Utilities
      • C Spacing Utilities
      • Display
      • Flex
      • Float
      • Inline Item
      • Overflow
      • Position
      • Shadow
      • Text
      • Vertical Align
      • Visibility
      • Width and Height
    • Playground
  • Examples
K
  • Docs
  • Sass API
  • Blog
  • Storybook
  • Codesandbox
  • Github
  • Use this menu to toggle between Atlas and Base Themes.

Tabs

yarn add @clayui/tabs

Tabs organize similar content together into individual sections in the same page.

  • Examples
  • Markup
  • API

Stable3.91.0View in LexiconCHANGELOGstorybook demos

  • Introduction
  • Basic Tabs
  • Modern Tabs
  • Dropdown Tabs
  • TabPanel

Introduction

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.

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:

Tabs

WarningThe `displayType` attribute has been deprecated after 3.89.0.

This is the default tab. The displayType attribute was deprecated after 3.89.0. You no longer need to use displayType="basic" to output this style.

Copied!
Code Sample (expand to see it)

Modern Tabs

WarningThe `modern` attribute has been deprecated after 3.89.0. The styles for the `.nav-underline` class have been removed.

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.

Copied!
Code Sample (expand to see it)

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:

Copied!
Code Sample (expand to see it)

TabPanel

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

How can this be improved? Create an issue!