Skip to content Skip to footer navigation
Light theme Dark theme
You are reading the Statamic 6 Alpha docs. 👀

Tabs

Tab 1 content

Tab 2 content

Tab 3 content

 
<ui-tabs default-tab="tab1" class="w-full">

    <ui-tab-list>

        <ui-tab-trigger text="Shiny" name="tab1" />

        <ui-tab-trigger text="Happy" name="tab2" />

        <ui-tab-trigger text="People" name="tab3" />

    </ui-tab-list>

    <ui-tab-content name="tab1">

        <p class="py-8">Tab 1 content</p>

    </ui-tab-content>

    <ui-tab-content name="tab2">

        <p class="py-8">Tab 2 content</p>

    </ui-tab-content>

    <ui-tab-content name="tab3">

        <p class="py-8">Tab 3 content</p>

    </ui-tab-content>

</ui-tabs>