Tabs

Usage

Tabs provide a user interface for navigating between distinct sections or pages within an application. Each <Tabs> component contains multiple <Tab> children, and the <Tabs> component itself can be styled as either primary or secondary variants to suit different use cases.

Primary Tabs

<Tabs value="videos">
	<Tab badge badgeLabel="2" value="videos">Videos</Tab>
	<Tab value="theme">Theme</Tab>
	<Tab badge value="settings">Setttings</Tab>
</Tabs>

Icons

<Tabs value="videos">
	<Tab badge badgeLabel="2" value="videos">
		{#snippet icon()}<Icon>videocam</Icon>{/snippet}Videos
	</Tab>
	<Tab value="theme">{#snippet icon()}<Icon>palette</Icon>{/snippet}Theme</Tab>
	<Tab badge value="settings">{#snippet icon()}<Icon>settings</Icon>{/snippet}Setttings</Tab>
</Tabs>

Secondary Tabs

<Tabs variant="secondary" value="videos">
	<Tab badge badgeLabel="2" value="videos">Videos</Tab>
	<Tab value="theme">Theme</Tab>
	<Tab badge value="settings">Setttings</Tab>
</Tabs>

Icons

<Tabs variant="secondary" value="videos">
	<Tab badge badgeLabel="2" value="videos">
		{#snippet icon()}<Icon>videocam</Icon>{/snippet}Videos
	</Tab>
	<Tab value="theme">{#snippet icon()}<Icon>palette</Icon>{/snippet}Theme</Tab>
	<Tab badge value="settings">{#snippet icon()}<Icon>settings</Icon>{/snippet}Setttings</Tab>
</Tabs>

Selection

The value prop on <Tabs> determines which tab is currently selected. Each <Tab> must have a unique value within the same <Tabs> group. When the value of <Tabs> matches a <Tab>'s value, that tab is highlighted as selected. To react to tab changes, use bind:value on <Tabs> to keep track of the selected tab in your component state.

Selected Tab: videos

<Tabs bind:value>
	<Tab value="videos">Videos</Tab>
	<Tab value="theme">Theme</Tab>
	<Tab value="settings">Setttings</Tab>
</Tabs>
<div>Selected Tab: {value}</div>

Links

To enable navigation between pages or routes, use the href attribute on <Tab>. This renders the tab as a link, allowing users to navigate to different routes when a tab is clicked. The href attribute works seamlessly with the value prop, so you can track which tab is selected even when navigating between pages. This approach is especially useful for SSR and deep linking.

<Tabs variant="secondary" value={page.url.searchParams.get('tab') || 'videos'}>
	<Tab data-sveltekit-noscroll href="/components/tabs?tab=videos" value="videos">Videos</Tab>
	<Tab data-sveltekit-noscroll href="/components/tabs?tab=theme" value="theme">Theme</Tab>
	<Tab data-sveltekit-noscroll href="/components/tabs?tab=settings" value="settings">Setttings</Tab>
</Tabs>

API

Tabs

Attributes

Attribute	Type	Default	Description
`value`	`number \| string`		Value of the current tab.
`variant`	`'primary' \| 'secondary'`	`undefined`	Sets the visual style of the tab. Use `'primary'` for the default appearance or `'secondary'` for an alternative style.
`element`	`HTMLElement`		A reference to the root DOM element of the component.

Tab

Attributes

Attribute	Type	Default	Description
`inlineIcon`	`boolean`	`false`	Only affects the `primary` variant.
`badge`	`boolean`	`false`
`badgeLabel`	`string \| number \| undefined`	`undefined`	A string representing the label to be displayed inside a badge element.
`value`	`number \| string`	`undefined`	The value associated with this tab. Used to identify which tab is selected.
`icon`	`Snippet \| undefined`	`undefined`	Provides a custom icon for the tab, typically rendered before the tab label. Accepts a Svelte snippet, such as an `<Icon>` component.
`href`	`string`	`undefined`	When set, the tab will render as a link using the provided URL. This allows navigation to other pages or routes when the tab is clicked.
`element`	`HTMLElement`		A reference to the root DOM element of the component.