ClayClay
  • Get Started
    • How to Use Clay
    • Composition Philosophy
    • How to Read This Documentation
    • Migrating From v2.x
    • Using Clay in JSPs
  • Components
    • Alert
    • Application Bar
    • Autocomplete
    • Badge
    • Breadcrumb
    • Button Group
    • Buttons
    • Card
    • Chart
    • Color Picker
    • Data Provider
    • Date Picker
    • Drop Down
    • Empty State
    • Form
      • Checkbox
      • Dual List Box
      • Input
      • Radio Group
      • Select
      • Select Box
      • Toggle Switch
    • Forms Hierarchy
    • Icon
    • Label
    • Layout
    • Link
    • List
    • Loading Indicator
    • Localized Input
    • Management Toolbar
    • Modal
    • Multi Select
    • Multi Step Nav
    • Nav
    • Navigation Bar
    • Pagination
    • Pagination Bar
    • Panel
    • Popover
    • Progress Bar
    • Sidebar
    • Slider
    • Sticker
    • Table
    • Tabs
    • Timelines
    • Time Picker
    • Toolbar
    • Tooltip
    • Upper Toolbar
  • Contributing
  • CSS Framework
    • Paver
    • SCSS
    • Color
    • Grid
    • Content
      • Typography
      • C Kbd
    • Utilities
      • Autofit
      • C Focus Inset
      • C Inner
      • C Spacing Utilities
      • Inline Item
    • Playground
  • Examples
  • Docs
  • 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.3.3View in LexiconCHANGELOGstorybook demos

  • Tabs
  • Tabs.Item
  • Tabs.Content
  • Tabs.TabPane

Tabs

PropertyTypeRequiredDefaultDescription
justified
booleanfalseJustify the nav items according the tab content.
modern
booleanfalsetrueApplies a modern style to the tab.

Tabs.Item

PropertyTypeRequiredDefaultDescription
active
booleanfalsefalseFlag to indicate if the component is active or not.
disabled
booleanfalsefalseFlag to indicate if the TabPane is disabled.
href
stringfalseThis value is used to be the target of the link.
innerProps
React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>false{}Props to be added to the item element that can be an anchor or a button.
onClick
(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => voidfalseCallback to be used when clicking to a Tab Item.

Tabs.Content

PropertyTypeRequiredDefaultDescription
activeIndex
numberfalse0Receives a number that indicates the `tabkey` to be rendered.
children
Array<React.ReactElement>trueChildren elements received from ClayTabs.Content component.
fade
booleanfalsefalseFlag to indicate if `fade` classname that applies an fading animation should be applied.

Tabs.TabPane

PropertyTypeRequiredDefaultDescription
active
booleanfalsefalseFlag to indicate if `active` classname should be applied
fade
booleanfalseFlag to indicate if `fade` classname that applies a fading animation should be applied.

How can this be improved? Create an issue!