Semantic UI React  1.0.0
GitHub CHANGELOG
Getting Started
IntroductionGet StartedCompositionShorthand PropsThemingLayout examplesPrototypes
Elements
ButtonContainerDividerFlagHeaderIconImageInputLabelListLoaderPlaceholderRailRevealSegmentStep
Collections
BreadcrumbFormGridMenuMessageTable
Views
AdvertisementCardCommentItemFeedStatistic
Modules
AccordionCheckboxDimmerDropdownEmbedModalPopupProgressRatingSearchSidebarStickyTabTransition
Behaviors
Visibility
Addons
ConfirmMount NodePaginationPortalRadioResponsiveSelectText AreaTransitionable Portal

Tab
A Tab is a hidden section of content activated by a Menu.

See:
MenuSegment
src/modules/Tab/Tab.js
Semantic UI Tab Docs
TabTab.Pane

Types

Controlling Tab pane re-renders
  • renderActiveOnly (default) Only the active pane is rendered. Switching tabs unmounts the current pane and mounts the new pane.
  • renderActiveOnly={false} All panes are rendered on Tab mount. Switching tabs hides the current pane and shows the new pane, without unmounting panes.

Basic

A basic tab.

A basic tab using renderActiveOnly={false}.

Pointing Menu

A tab menu can point to its tab panes.

Secondary Menu

A tab menu can adjust its appearance to de-emphasize its contents.

Text Menu

A tab menu can be formatted for text content.

States

Loading

A tab can display a loading indicator.

Menu Variations

Usage

Active Index

A tab can be a controlled component.

Default Active Index

A tab can define which pane is active by default.

On Tab Change

You can capture the tab change event.

Custom Menu Items

You can pass any shorthand value as a menu item.

Pane Shorthands

You can use item shorthands when you're using renderActiveOnly={false}.

This is the bottom