Tabs
Use tabs to quickly switch between different views and pages.
import { TabGroup, Tab, TabAnchor } from '@skeletonlabs/skeleton';Demo
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.
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>