Tabs

Introduction

Tabs allows you to specify a user-selectable collection of different pieces of content to display. A Tab element represents both the title of the tab inside the tab bar as well as the content that the tab corresponds to.

Tabs can be used in controlled mode by providing selectedTabId and onChange props, or in uncontrolled mode by optionally providing defaultSelectedTabId and onChange. The Tab child components are then managed by the Tabs component. Clicking one will change selection by triggering the onChange property of the controlling Tabs component. Arbitrary other children are simply rendered in order; interactions are your responsibility.

The below information is a snippet from the

related section in the Blueprint reference documentation.

Examples

Angular
Ember
React
Backbone
You have selected Angular.
You have selected Ember.
You have selected React.
You have selected Backbone.
Edit code

Usage

Tabs

Tabs is the top-level component responsible for rendering the tab list and coordinating selection. It can be used in controlled mode by providing selectedTabId and onChange props, or in uncontrolled mode by optionally providing defaultSelectedTabId and onChange.

Children of the Tabs are rendered in order in the tab list, which is a flex container. Tab children are managed by the component; clicking one will change selection. Arbitrary other children are simply rendered in order; interactions are your responsibility.

Insert a <Tabs.Expander /> between any two children to right-align all subsequent children (or bottom-align when vertical).

Tab

Tab is a minimal wrapper with no functionality of its own — it is managed entirely by its parent Tabs wrapper. Tab title text can be set either via title prop or via React children (for more complex content).

The associated tab panel will be visible when the Tab is active. Omitting panel is supported and can be useful when you want the associated panel to appear elsewhere in the DOM (by rendering it yourself as needed).

API Reference

Tabs

Prop Name	Required?	Type	Description
animate	false	boolean	Whether the selected tab indicator should animate its movement.
className	false	string	A space-delimited list of class names to pass along to a child element.
defaultSelectedTabId	false	TabId	Initial selected tab `id`, for uncontrolled usage. Note that this prop refers only to `<Tab>` children; other types of elements are ignored.
id	true	TabId	Unique identifier for this `Tabs` container. This will be combined with the `id` of each `Tab` child to generate ARIA accessibility attributes. IDs are required and should be unique on the page to support server-side rendering.
large	false	boolean	If set to `true`, the tab titles will display with larger styling. This will apply large styles only to the tabs at this level, not to nested tabs.
renderActiveTabPanelOnly	false	boolean	Whether inactive tab panels should be removed from the DOM and unmounted in React. This can be a performance enhancement when rendering many complex panels, but requires careful support for unmounting and remounting.
selectedTabId	false	TabId	Selected tab `id`, for controlled usage. Providing this prop will put the component in controlled mode. Unknown ids will result in empty selection (no errors).
vertical	false	boolean	Whether to show tabs stacked vertically on the left side.

Tab

Prop Name	Required?	Type	Description
children	false	React.ReactNode	Content of tab title, rendered in a list above the active panel. Can also be set via the `title` prop.
className	false	string	A space-delimited list of class names to pass along to a child element.
disabled	false	boolean	Whether the tab is disabled.
id	true	TabId	Unique identifier used to control which tab is selected and to generate ARIA attributes for accessibility.
panel	false	Element	Panel content, rendered by the parent `Tabs` when this tab is active. If omitted, no panel will be rendered for this tab.
panelClassName	false	string	Space-delimited string of class names applied to tab panel container.
title	false	React.ReactNode	Content of tab title element, rendered in a list above the active panel. Can also be set via React `children`.

Related Reading

Blueprint Reference

Panel Stack