WARNING! You are browsing the docs for an old version of TallStackUI. See the v4 docs.

Powerful suite of Blade components for TALL Stack apps.

Tab

Tab component.

WARNING!

You are browsing the docs for an old version of TallStackUI. Consider upgrade your project to TallStackUI v4.

# Basic Usage

Tab 1
Tab 2
Tab 3
Tab 4
Tab 5 
<x-tab selected="Tab 1">
    <x-tab.items tab="Tab 1">
        Tab 1
    </x-tab.items>
    <x-tab.items tab="Tab 2">
        Tab 2
    </x-tab.items>
    <x-tab.items tab="Tab 3">
        Tab 3
    </x-tab.items>
    <x-tab.items tab="Tab 4">
        Tab 4
    </x-tab.items>
    <x-tab.items tab="Tab 5">
        Tab 5
    </x-tab.items>
</x-tab>

# Centered

An option to center the tab navigation items.

Tab 1
Tab 2
Tab 3 
<x-tab selected="Tab 1" centered>
    <x-tab.items tab="Tab 1">
        Tab 1
    </x-tab.items>
    <x-tab.items tab="Tab 2">
        Tab 2
    </x-tab.items>
    <x-tab.items tab="Tab 3">
        Tab 3
    </x-tab.items>
</x-tab>

# Scroll on Mobile

On mobile devices the tab component displays a HTML select element for tab selection. You can change this behavior by using the scroll-on-mobile attribute, which will disable the select button and allow navigation to occur by natural tab selection.

Tab 1
Tab 2
Tab 3
Tab 4
Tab 5
Tab 6
Tab 7
Tab 8 
<x-tab selected="Tab 1" scroll-on-mobile>
    <x-tab.items tab="Tab 1">
        Tab 1
    </x-tab.items>
    <x-tab.items tab="Tab 2">
        Tab 2
    </x-tab.items>
    <x-tab.items tab="Tab 3">
        Tab 3
    </x-tab.items>
    <x-tab.items tab="Tab 4">
        Tab 4
    </x-tab.items>
    <x-tab.items tab="Tab 5">
        Tab 5
    </x-tab.items>
    <x-tab.items tab="Tab 6">
        Tab 6
    </x-tab.items>
    <x-tab.items tab="Tab 7">
        Tab 7
    </x-tab.items>
    <x-tab.items tab="Tab 8">
        Tab 8
    </x-tab.items>
</x-tab>

# Slots

Invoices
Transactions 
<x-tab selected="Invoices">
    <x-tab.items tab="Invoices">
        <x-slot:right>
            <x-icon name="document-text" class="w-5 h-5" />
        </x-slot:right>
        Invoices
    </x-tab.items>
    <x-tab.items tab="Transactions">
        <x-slot:left>
            <x-icon name="currency-dollar" class="w-5 h-5" />
        </x-slot:left>
        Transactions
    </x-tab.items>
</x-tab>

# Route-Based Tabs

Starting from v3, tabs can be associated with URLs using the href attribute on tab.items . When set, the tab's content only renders server-side if the current URL matches. Clicking a different tab navigates to its URL. This avoids rendering heavy Livewire components for inactive tabs.

You can use the navigate attribute to use Livewire SPA navigation: 

<x-tab>
    <x-tab.items tab="users" title="Users" :href="route('users.index')" navigate>
        <livewire:users.index />
    </x-tab.items>
    <x-tab.items tab="invoices" title="Invoices" :href="route('invoices.index')" navigate>
        <livewire:invoices.index />
    </x-tab.items>
</x-tab>

You can also use navigate-hover to prefetch the URL on hover before navigating on click: 

<x-tab>
    <x-tab.items tab="users" title="Users" :href="route('users.index')" navigate-hover>
        <livewire:users.index />
    </x-tab.items>
    <x-tab.items tab="invoices" title="Invoices" :href="route('invoices.index')" navigate-hover>
        <livewire:invoices.index />
    </x-tab.items>
</x-tab>

Without navigate or navigate-hover , clicking a tab with href will use plain window.location.href navigation. Tabs without href continue to work as before with client-side switching.

# Events

Invoices
Transactions 
<x-tab selected="Invoices" x-on:navigate="alert($event.detail.select)">
    <x-tab.items tab="Invoices">
        <x-slot:right>
            <x-icon name="document-text" class="w-5 h-5" />
        </x-slot:right>
        Invoices
    </x-tab.items>
    <x-tab.items tab="Transactions">
        <x-slot:left>
            <x-icon name="currency-dollar" class="w-5 h-5" />
        </x-slot:left>
        Transactions
    </x-tab.items>
</x-tab>

# Wireable

An option to control the tab via Livewire.

Tab 1
Tab 2
Tab 3
Tab 4
Tab 5

Selected: Tab 1

<!--  Livewire string property: $tab - initial value: "Tab 1" -->
 
<x-tab wire:model="tab">
    <x-tab.items tab="Tab 1">
        Tab 1
    </x-tab.items>
    <x-tab.items tab="Tab 2">
        Tab 2
    </x-tab.items>
    <x-tab.items tab="Tab 3">
        Tab 3
    </x-tab.items>
    <x-tab.items tab="Tab 4">
        Tab 4
    </x-tab.items>
    <x-tab.items tab="Tab 5">
        Tab 5
    </x-tab.items>
</x-tab>
 
<x-button wire:click="$set('tab', 'Tab 5')">Change to Tab 5</x-button>

# Live Wireable

An option to control the tab via Livewire with live updates.

Tab 1
Tab 2
Tab 3
Tab 4
Tab 5

Selected: Tab 1

<!--  Livewire string property: $tab - initial value: "Tab 1" -->
 
<x-tab wire:model.live="tab">
    <x-tab.items tab="Tab 1">
        Tab 1
    </x-tab.items>
    <x-tab.items tab="Tab 2">
        Tab 2
    </x-tab.items>
    <x-tab.items tab="Tab 3">
        Tab 3
    </x-tab.items>
    <x-tab.items tab="Tab 4">
        Tab 4
    </x-tab.items>
    <x-tab.items tab="Tab 5">
        Tab 5
    </x-tab.items>
</x-tab>

Code highlighting provided by Torchlight