Tabs

Organize content into separate panels within a single container. Easily switch between sections without leaving the page.

<x-tab.group wire:model="tab">
    <x-tabs>
        <x-tab name="profile">Profile</x-tab>
        <x-tab name="account">Account</x-tab>
        <x-tab name="billing">Billing</x-tab>
    </x-tabs>
 
    <x-tab.panel name="profile">...</x-tab.panel>
    <x-tab.panel name="account">...</x-tab.panel>
    <x-tab.panel name="billing">...</x-tab.panel>
</x-tab.group>

With icons

Associate tab labels with icons to visually distinguish different sections.

<x-tab.group>
    <x-tabs>
        <x-tab name="profile" icon="o-user">Profile</x-tab>
        <x-tab name="account" icon="o-cog-6-tooth">Account</x-tab>
        <x-tab name="billing" icon="o-banknotes">Billing</x-tab>
    </x-tabs>
 
    <x-tab.panel name="profile">...</x-tab.panel>
    <x-tab.panel name="account">...</x-tab.panel>
    <x-tab.panel name="billing">...</x-tab.panel>
</x-tab.group>

Padded edges

By default, the tabs will have no horizontal padding around the edges. If you want to add padding you can do by adding Tailwind utilities to the


    tabs

and/or


    tab.panel

components.

<x-tabs class="px-4">
    <x-tab name="profile">Profile</x-tab>
    <x-tab name="account">Account</x-tab>
    <x-tab name="billing">Billing</x-tab>
</x-tabs>

Segmented tabs

Tab through content with visually separated, button-like tabs. Ideal for toggling between views inside a container with a constrained width.

<x-tabs variant="segmented">
    <x-tab name="list">List</x-tab>
    <x-tab name="board">Board</x-tab>
    <x-tab name="timeline">Timeline</x-tab>
</x-tabs>

Segmented with icons

Combine segmented tabs with icon prefixes.

<x-tabs variant="segmented">
    <x-tab name="list" icon="m-list-bullet">List</x-tab>
    <x-tab name="board" icon="m-squares-2x2">Board</x-tab>
    <x-tab name="timeline" icon="m-calendar-days">Timeline</x-tab>
</x-tabs>

Small segmented tabs

For more compact layouts, you can use the


    size="sm"

prop to make the tabs smaller.

<x-tabs variant="segmented" size="sm">
    <x-tab name="demo">Demo</x-tab>
    <x-tab name="code">Code</x-tab>
</x-tabs>

Variant shorthand

You can pass a


    variant

prop to the


    tab.group

component, and all child tabs will inherit it. Individual tabs can override the variant by specifying their own. Available variants are


    default

and


    segmented

<x-tab.group variant="segmented">
    <x-tabs>
        <x-tab>Profile</x-tab>
        <x-tab>Account</x-tab>
        <x-tab>Billing</x-tab>
    </x-tabs>
 
    <x-tab.panel>...</x-tab.panel>
    <x-tab.panel>...</x-tab.panel>
    <x-tab.panel>...</x-tab.panel>
</x-tab.group>

Alpine Only

You can use the tabs component without Livewire by relying solely on Alpine.js. Pass the


    active

prop or leave it out to auto-select the first panel. The tabs will function normally but without state tracking.

<x-tab.group active="list">
    <x-tabs>
        <x-tab name="list">List</x-tab>
        <x-tab name="board">Board</x-tab>
        <x-tab name="timeline">Timeline</x-tab>
    </x-tabs>
</x-tab.group>

Active state

You can track the active tab state by using


    wire:model

and the URL attribute, which syncs the tab's active state with the URL.

+use Livewire\Attributes\Url; 
 use Livewire\Component;
  
 class YourLivewireComponent extends Component
 {
+    #[Url('/tab')] 
+    public string $tab = 'profile'; 
  
     public function render()
     {
         return view('livewire.your-livewire-component');
     }
 }

<x-tab.group wire:model="tab">
    <x-tabs>
        <x-tab name="profile">Profile</x-tab>
        <x-tab name="account">Account</x-tab>
        <x-tab name="billing">Billing</x-tab>
    </x-tabs>
</x-tab.group>

You can directly navigate to a specific tab by accessing the URL with the corresponding tab name.

https://your-app-name/?/tab=account