Svelte Component


Use tabs to quickly switch between different views and pages.

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


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.


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.


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.


Use the justify property to adjust tab positions.


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.

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

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