TallStackUI 4.0 is here! Seven new components and thousand of improvements. See what's new .

Powerful suite of Blade components for TALL Stack apps

Tab

Tab component.

# 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

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>
Event Detail Fired when
navigate { select } The selected tab changes

# 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>

# Flat Look
NEW

An option to display the component without shadows.

Content 1
Content 2
Content 1
Content 2
Content 1
Content 2 
<x-tab selected="Tab 1" bordered>
    <x-tab.items tab="Tab 1">Content 1</x-tab.items>
    <x-tab.items tab="Tab 2">Content 2</x-tab.items>
</x-tab>
 
<x-tab selected="Tab 1" shadowless>
    <x-tab.items tab="Tab 1">Content 1</x-tab.items>
    <x-tab.items tab="Tab 2">Content 2</x-tab.items>
</x-tab>
 
<x-tab selected="Tab 1" shadowless bordered>
    <x-tab.items tab="Tab 1">Content 1</x-tab.items>
    <x-tab.items tab="Tab 2">Content 2</x-tab.items>
</x-tab>

# Paddingless
NEW

An option to display the component without any padding on the body.

Tall
Stack
UI 🥰 
<x-tab selected="Tab 1" paddingless>
    <x-tab.items tab="Tab 1">
        Tall
    </x-tab.items>
    <x-tab.items tab="Tab 2">
        Stack
    </x-tab.items>
    <x-tab.items tab="Tab 3">
        UI 🥰
    </x-tab.items>
</x-tab>

Code highlighting provided by Torchlight