Tabs

Tabs

Interactive tab navigation component with default and pill variants.

1234567891011121314151617181920
package showcase

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ TabsDefault() {
	@popui.Tabs(props.Tabs{}) {
		@popui.Tab(props.Tab{Active: true}) {
			Account
		}
		@popui.Tab(props.Tab{}) {
			Settings
		}
		@popui.Tab(props.Tab{}) {
			Privacy
		}
	}
}

Active State

Control which tab is active using the Active prop.

1234567891011121314151617181920
package showcase

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ TabsActive() {
	@popui.Tabs(props.Tabs{}) {
		@popui.Tab(props.Tab{}) {
			Overview
		}
		@popui.Tab(props.Tab{Active: true}) {
			Details
		}
		@popui.Tab(props.Tab{}) {
			History
		}
	}
}

Variants

Tabs come in two variants: default (underline) and pill.

12345678910111213141516171819202122232425262728293031323334353637
package showcase

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ TabsVariants() {
	<div class="space-y-6">
		<div>
			@popui.Tabs(props.Tabs{}) {
				@popui.Tab(props.Tab{Active: true}) {
					Overview
				}
				@popui.Tab(props.Tab{}) {
					Details
				}
				@popui.Tab(props.Tab{}) {
					History
				}
			}
		</div>
		<div>
			@popui.Tabs(props.Tabs{Variant: "pill"}) {
				@popui.Tab(props.Tab{Active: true, Variant: "pill"}) {
					Profile
				}
				@popui.Tab(props.Tab{Variant: "pill"}) {
					Preferences
				}
				@popui.Tab(props.Tab{Variant: "pill"}) {
					Security
				}
			}
		</div>
	</div>
}

With Icons

Tabs can contain icons alongside text.

123456789101112131415161718192021222324
package showcase

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
	"github.com/invopop/popui/icons"
)

templ TabsWithIcons() {
	@popui.Tabs(props.Tabs{}) {
		@popui.Tab(props.Tab{Active: true}) {
			@icons.User()
			Account
		}
		@popui.Tab(props.Tab{}) {
			@icons.Settings()
			Settings
		}
		@popui.Tab(props.Tab{}) {
			@icons.Lock()
			Privacy
		}
	}
}

API Reference

The main tabs container component.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier for the tabs element
`Class`	`string`	-	Additional CSS classes to merge with base styles
`Attributes`	`templ.Attributes`	-	Additional HTML attributes to apply to the tabs container
`Variant`	`string`	`default`	Style variant: "default" for underline tabs or "pill" for pill-style tabs

Tab

Individual tab button component used inside Tabs.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier for the tab element
`Class`	`string`	-	Additional CSS classes to merge with base styles
`Attributes`	`templ.Attributes`	-	Additional HTML attributes to apply to the tab button
`Active`	`bool`	`false`	Whether this tab is currently active
`Variant`	`string`	`default`	Style variant: "default" for underline tabs or "pill" for pill-style tabs (should match parent Tabs variant)