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

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.

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 an item shorthands when you're using renderActiveOnly={false}.

This is the bottom