Tabs

The Tabs component renders Bulma’s tabs with built-in client-side panel switching. Tab panels are associated by matching data-tab-panel attributes.

Basic tabs

• First
• Second
• Third

Content for the First tab.

Content for the Second tab.

Content for the Third tab.

<Tabs
  tabs={[
    { id: "tab1", label: "First" },
    { id: "tab2", label: "Second" },
    { id: "tab3", label: "Third" },
  ]}
>
  <div data-tab-panel="tab1"><p>Content for the First tab.</p></div>
  <div data-tab-panel="tab2"><p>Content for the Second tab.</p></div>
  <div data-tab-panel="tab3"><p>Content for the Third tab.</p></div>
</Tabs>

With counts

Add a count to display a badge next to the tab label:

• All 42
• Active 15
• Archived 27

All 42 items.

15 active items.

27 archived items.

<Tabs
  tabs={[
    { id: "all", label: "All", count: 42 },
    { id: "active", label: "Active", count: 15 },
    { id: "archived", label: "Archived", count: 27 },
  ]}
>
  <div data-tab-panel="all"><p>All 42 items.</p></div>
  <div data-tab-panel="active"><p>15 active items.</p></div>
  <div data-tab-panel="archived"><p>27 archived items.</p></div>
</Tabs>

Boxed style

• Alpha
• Beta
• Gamma

Alpha panel.

Beta panel.

Gamma panel.

<Tabs
  boxed
  tabs={[
    { id: "a", label: "Alpha" },
    { id: "b", label: "Beta" },
    { id: "c", label: "Gamma" },
  ]}
>
  <div data-tab-panel="a"><p>Alpha panel.</p></div>
  <div data-tab-panel="b"><p>Beta panel.</p></div>
  <div data-tab-panel="c"><p>Gamma panel.</p></div>
</Tabs>

Sizes

• Small
• Tabs

Small tab panel.

Another small panel.

<Tabs size="small" tabs={[...]}>...</Tabs>

Panel content

Each panel must be a direct slot child with data-tab-panel matching the corresponding tab id. Panels that don’t match the active tab are hidden via hidden:

<Tabs tabs={[{ id: "info", label: "Info" }, { id: "settings", label: "Settings" }]}>
  <!-- Wrap in any element with data-tab-panel -->
  <div data-tab-panel="info">
    <p>Info content here.</p>
  </div>
  <div data-tab-panel="settings">
    <form>...</form>
  </div>
</Tabs>

Props

Prop	Type	Default	Description
tabs	Array<{ id: string; label: string; count?: number }>	—	Required. Ordered list of tab definitions.
size	"small" | "medium" | "large"	—	Bulma size modifier.
boxed	boolean	—	Adds .is-boxed to the tabs nav.
class	string	—	Extra classes on the outer wrapper <div>.