navigationtabs

Tabs

Tabbed navigation component with configurable orientation and variant styles.

Import#

import { Tabs } from 'moraine'

Slot Structure#

Tab list with triggers and associated content panels.

root
├── list
│   ├── indicator (optional)
│   └── trigger (×n)
│       ├── leading (Icon, optional)
│       └── label (optional)
└── content (×n)

Examples#

Variants#

Pill and link visual variants for the tab list.

1
function Variants() {
2
  return (
3
    <div class="flex flex-col gap-8 w-xl">
4
      <Tabs
5
        defaultValue="overview"
6
        variant="pill"
7
        items={[
8
          {
9
            label: 'Overview',
10
            value: 'overview',
11
            icon: 'i-lucide:layout-dashboard',
12
            content: <p class="text-sm text-foreground">Overview panel content.</p>,
13
          },
14
          {
15
            label: 'Settings',
16
            value: 'settings',
17
            icon: 'i-lucide:settings',
18
            content: <p class="text-sm text-foreground">Settings panel content.</p>,
19
          },
20
          {
21
            label: 'Billing',
22
            value: 'billing',
23
            icon: 'i-lucide:credit-card',
24
            content: <p class="text-sm text-foreground">Billing panel content.</p>,
25
          },
26
        ]}
27
      />
28
      <Tabs
29
        defaultValue="settings"
30
        variant="link"
31
        items={[
32
          {
33
            label: 'Overview',
34
            value: 'overview',
35
            icon: 'i-lucide:layout-dashboard',
36
            content: <p class="text-sm text-foreground">Overview panel content.</p>,
37
          },
38
          {
39
            label: 'Settings',
40
            value: 'settings',
41
            icon: 'i-lucide:settings',
42
            content: <p class="text-sm text-foreground">Settings panel content.</p>,
43
          },
44
          {
45
            label: 'Billing',
46
            value: 'billing',
47
            icon: 'i-lucide:credit-card',
48
            content: <p class="text-sm text-foreground">Billing panel content.</p>,
49
          },
50
        ]}
51
      />
52
    </div>
53
  )
54
}

Sizes#

Trigger size scale from xs to xl.

1
function Sizes() {
2
  const SIZE_OPTIONS = ['xs', 'sm', 'md', 'lg', 'xl'] as const
3

4
  return (
5
    <div class="w-xl space-y-4">
6
      <For each={SIZE_OPTIONS}>
7
        {(size) => (
8
          <div class="space-y-1">
9
            <p class="text-xs text-muted-foreground tracking-wide uppercase">{size}</p>
10
            <Tabs
11
              size={size}
12
              defaultValue="overview"
13
              items={[
14
                {
15
                  label: 'Overview',
16
                  value: 'overview',
17
                  content: <p class="text-sm text-foreground">Overview</p>,
18
                },
19
                {
20
                  label: 'Metrics',
21
                  value: 'metrics',
22
                  content: <p class="text-sm text-foreground">Metrics</p>,
23
                },
24
                {
25
                  label: 'Activity',
26
                  value: 'activity',
27
                  content: <p class="text-sm text-foreground">Activity</p>,
28
                },
29
              ]}
30
            />
31
          </div>
32
        )}
33
      </For>
34
    </div>
35
  )
36
}

Orientations#

Horizontal and vertical orientation with the same items contract.

1
function Orientations() {
2
  return (
3
    <div class="flex gap-8 w-2xl">
4
      <Tabs
5
        defaultValue="overview"
6
        orientation="horizontal"
7
        items={[
8
          {
9
            label: 'Overview',
10
            value: 'overview',
11
            icon: 'i-lucide:layout-dashboard',
12
            content: <p class="text-sm text-foreground">Overview panel content.</p>,
13
          },
14
          {
15
            label: 'Settings',
16
            value: 'settings',
17
            icon: 'i-lucide:settings',
18
            content: <p class="text-sm text-foreground">Settings panel content.</p>,
19
          },
20
          {
21
            label: 'Billing',
22
            value: 'billing',
23
            icon: 'i-lucide:credit-card',
24
            content: <p class="text-sm text-foreground">Billing panel content.</p>,
25
          },
26
        ]}
27
      />
28
      <Tabs
29
        defaultValue="settings"
30
        orientation="vertical"
31
        classes={{
32
          root: 'max-w-md',
33
          list: 'w-40',
34
        }}
35
        items={[
36
          {
37
            label: 'Overview',
38
            value: 'overview',
39
            icon: 'i-lucide:layout-dashboard',
40
            content: <p class="text-sm text-foreground w-sm">Overview panel content.</p>,
41
          },
42
          {
43
            label: 'Settings',
44
            value: 'settings',
45
            icon: 'i-lucide:settings',
46
            content: <p class="text-sm text-foreground w-sm">Settings panel content.</p>,
47
          },
48
          {
49
            label: 'Billing',
50
            value: 'billing',
51
            icon: 'i-lucide:credit-card',
52
            content: <p class="text-sm text-foreground w-sm">Billing panel content.</p>,
53
          },
54
        ]}
55
      />
56
    </div>
57
  )
58
}

Controlled + Disabled Items#

Controlled value with disabled tab options and external navigation controls.

1
function ControlledDisabledItems() {
2
  const [value, setValue] = createSignal('overview')
3

4
  return (
5
    <div class="space-y-3">
6
      <div class="flex flex-wrap gap-2">
7
        <Button size="sm" variant="outline" onClick={() => setValue('overview')}>
8
          Go overview
9
        </Button>
10
        <Button size="sm" variant="outline" onClick={() => setValue('settings')}>
11
          Go settings
12
        </Button>
13
        <Button size="sm" variant="secondary" onClick={() => setValue('billing')}>
14
          Try disabled billing
15
        </Button>
16
      </div>
17

18
      <Tabs
19
        value={value()}
20
        onChange={setValue}
21
        variant="link"
22
        items={[
23
          {
24
            label: 'Overview',
25
            value: 'overview',
26
            content: <p class="text-sm text-foreground">Overview section with release status.</p>,
27
          },
28
          {
29
            label: 'Settings',
30
            value: 'settings',
31
            content: (
32
              <p class="text-sm text-foreground">Settings section with environment options.</p>
33
            ),
34
          },
35
          {
36
            label: 'Billing (Disabled)',
37
            value: 'billing',
38
            disabled: true,
39
            content: <p class="text-sm text-foreground">This panel is intentionally disabled.</p>,
40
          },
41
        ]}
42
      />
43
      <p class="text-xs text-muted-foreground">Current tab value: {value()}</p>
44
    </div>
45
  )
46
}

API Reference#

Attributes#

Slotroot1 attribute

Tabs container that owns tab selection and panel rendering.

Data Attributes

Data Attribute	Description
data-orientation	Stores the rendered orientation.

Props#

Prop	Type	Default	Description
activationMode	`"manual" \| "automatic" \| undefined`	`automatic`	Whether keyboard navigation activates the tab immediately or waits for confirmation.
class	`ClassValue`	—	Class applied to the component root or trigger element.
classes	`TabsT.Classes \| undefined`	—	—
defaultValue	`string \| undefined`	—	Default active tab value for uncontrolled usage.
disabled	`boolean \| undefined`	`false`	Whether the tab list is disabled.
id	`string \| undefined`	—	Unique identifier for the tabs root element.
items	`TabsT.Item[] \| undefined`	—	Array of tabs to display.
keyboardLoop	`boolean \| undefined`	`true`	Whether arrow-key navigation wraps from the ends.
onChange	`((value: string) => void) \| undefined`	—	Callback when the active tab changes.
orientation	`"horizontal" \| "vertical" \| undefined`	`horizontal`	The orientation of the tab list.
ref	`JSX.HTMLElementTags["div"] extends { ref?: infer Ref; } ? Ref : never \| undefined`	—	—
size	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| undefined`	—	—
style	`JSX.CSSProperties \| undefined`	—	—
styles	`TabsT.Styles \| undefined`	—	—
value	`string \| undefined`	—	Controlled active tab value.
variant	`"link" \| "pill" \| undefined`	—	—

Items#

An individual tab in the tabs component.

Prop	Type	Default	Description
content	`JSX.Element`	—	Content to display when the tab is active.
disabled	`boolean \| undefined`	`false`	Whether the tab is disabled.
icon	`IconT.Name`	—	Icon to display next to the label.
label	`JSX.Element`	—	Label to display on the tab trigger.
value	`string \| undefined`	`index of the item`	Unique value for the tab.