Tabs

A Warcraft-themed tabbed navigation. Supports all five factions and horizontal/vertical orientations.

Default (Horizontal)

Warriors are melee fighters who rely on strength and heavy armor.

Human Faction

Holy warriors of the Light, wielding both sword and divine magic.

Orc Faction

Master swordsmen who walk the path of the blade with deadly precision.

Elf Faction

Ancient guardians of the forests, wielding nature's raw power.

Undead Faction

Undead spellcasters of immense power, masters of frost magic.

Vertical Orientation

Exodus of the Horde — Thrall leads his people to Kalimdor.

Usage

<script>
  import { Tabs, TabsList, TabsTrigger, TabsContent } from 'warcraftcn-ui-svelte';
  let active = $state('tab1');
</script>

<Tabs bind:value={active}>
  <TabsList>
    <TabsTrigger value="tab1">Tab 1</TabsTrigger>
    <TabsTrigger value="tab2">Tab 2</TabsTrigger>
  </TabsList>
  <TabsContent value="tab1">Content 1</TabsContent>
  <TabsContent value="tab2">Content 2</TabsContent>
</Tabs>

Props

Prop	Type	Default
value	string (bindable)	""
faction	"default" \| "orc" \| "elf" \| "human" \| "undead"	"default"
orientation	"horizontal" \| "vertical"	"horizontal"