Document

Tabs allow users to navigate between different sections of a page.

 1<x-tab.group>
 2    <x-slot:tabs>
 3        <x-tab name="works" active>Works</x-tab>
 4        <x-tab name="teams">Teams</x-tab>
 5        <x-tab name="activity">Activity</x-tab>
 6    </x-slot:tabs>
 7 
 8    <x-tab.panel name="works" active></x-tab.panel>
 9    <x-tab.panel name="teams"></x-tab.panel>
10    <x-tab.panel name="activity"></x-tab.panel>
11</x-tab.group>

Sizes

Customize the size of the tabs using the size attribute on the <x-tab.group> component. Available sizes are sm, md, and lg.

1<x-tab.group size="sm">[...]</x-tab.group>
2<x-tab.group size="md">[...]</x-tab.group>
3<x-tab.group size="lg">[...]</x-tab.group>

Button Tabs

Create tabs that look like buttons using the type="button" attribute on the <x-tab.group> component.

1<x-tab.group type="button">
2    <x-slot:tabs>
3        <x-tab name="works" href="/works" active>Works</x-tab>  
4        <x-tab name="teams" href="/teams">Teams</x-tab> 
5        <x-tab name="activity" href="/activity">Activity</x-tab> 
6    </x-slot:tabs>
7</x-tab.group>

Tabs as Links

Use the href attribute to make tabs act as links.

1<x-tab.group>
2    <x-slot:tabs>
3        <x-tab name="works" href="/works" active>Works</x-tab>  
4        <x-tab name="teams" href="/teams">Teams</x-tab> 
5        <x-tab name="activity" href="/activity">Activity</x-tab> 
6    </x-slot:tabs>
7</x-tab.group>

Events

You can use the x-on:tab-change event on the <x-tab.group> component to listen for tab changes or use the x-on:tab-opened event on the <x-tab.panel> component to listen for when a tab is opened.

 1<x-tab.group x-on:tab-change="alert('Tab changed to ' + $event.detail.name)"> 
 2    <x-slot:tabs>
 3        <x-tab name="works" active>Works</x-tab>
 4        <x-tab name="teams">Teams</x-tab>
 5        <x-tab name="activity">Activity</x-tab>
 6    </x-slot:tabs>
 7 
 8    <x-tab.panel name="works" active></x-tab.panel>
 9    <x-tab.panel name="teams" x-on:tab-opened="alert('Teams tab opened!')"></x-tab.panel> 
10    <x-tab.panel name="activity"></x-tab.panel>
11</x-tab.group>

Icons

Add icons to tabs to provide additional context.

 1<x-tab.group>
 2    <x-slot:tabs>
 3        <x-tab name="works" active icon="document-text--outline">Works</x-tab>
 4        <x-tab name="teams" icon="users--outline">Teams</x-tab>
 5        <x-tab name="activity" icon="numbered-list--outline">Activity</x-tab>
 6    </x-slot:tabs>
 7 
 8    <x-tab.panel name="works" active></x-tab.panel>
 9    <x-tab.panel name="teams"></x-tab.panel>
10    <x-tab.panel name="activity"></x-tab.panel>
11</x-tab.group>