Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.

Default

Account

Make changes to your account here.

Name

Username

Persistent State

Use the storageKey prop to persist the active tab in localStorage. The selected tab will be remembered across page navigations and refreshes.

Overview content. Navigate away and come back - this tab will remain selected.

Usage

<twig:Tabs>
    <twig:TabsList>
        <twig:TabsTrigger value="tab1" :active="true">Tab 1</twig:TabsTrigger>
        <twig:TabsTrigger value="tab2">Tab 2</twig:TabsTrigger>
    </twig:TabsList>
    <twig:TabsContent value="tab1" :active="true">
        Content for tab 1
    </twig:TabsContent>
    <twig:TabsContent value="tab2">
        Content for tab 2
    </twig:TabsContent>
</twig:Tabs>

<twig:Tabs :storageKey="'my-unique-key'">
    ...
</twig:Tabs>