Svelte Component

Tabs

Use tabs to quickly switch between different views and pages.

typescript
import { TabGroup, Tab, TabAnchor } from '@skeletonlabs/skeleton';
Source Page Source WAI-ARIA

Demo

A written or printed work consisting of pages glued or sewn together along one side and bound in covers.

We offer two types of Tab components, but recommend you avoiding mixing these to ensure a consistent user experience.

Tab

See the featured example above for reference. Maintains an active selection state, which is ideal for quickly switching panel content available directly on the page. Please note that using the panel slot is optional, but recommended.

TabAnchor

Operate as anchor tags, supporting all common attributes. These are recommended for tabbing between route pages. Please avoid using target="_blank" as this would be harmful to the expected user experience.

Justify

Use the justify property to adjust tab positions.

Navigation

Tabs make a great choice for bottom navigation bars for a responsive App Rail alternative. Use Anchor Tabs and customize the styling as desired.

Simulated route: /books

Using Svelte Stores

For the standard Tab component, you may optionally choose to use Svelte writable stores to manage the tab state. Note the use of the $ sign within the bind:group property. Pair this with Skeleton's Local Storage Store for automatic persistence.

typescript
import { writable, type Writable } from 'svelte/store';

const tabSet: Writable<number> = writable(0);
typescript
<Tab bind:group={$tabSet} name="tab1" value={0}>(label)</Tab>