Tabs Component

The Tabs component provides accessible tab navigation with keyboard support and animated underline indicators.

Basic Usage

Create tabs with an array of items and Alpine.js for state management:

<div x-data="{ selectedTab: 'profile' }">
    <x-tabs 
        :items="[
            ['slug' => 'profile', 'label' => 'Profile'],
            ['slug' => 'settings', 'label' => 'Settings'],
            ['slug' => 'notifications', 'label' => 'Notifications']
        ]" 
        model="selectedTab" />

    <div class="mt-4">
        <div x-show="selectedTab === 'profile'">
            <p>Profile content here</p>
        </div>
        <div x-show="selectedTab === 'settings'">
            <p>Settings content here</p>
        </div>
        <div x-show="selectedTab === 'notifications'">
            <p>Notifications content here</p>
        </div>
    </div>
</div>

With Icons

Add icons to tabs for better visual hierarchy:

<div x-data="{ activeTab: 'dashboard' }">
    <x-tabs 
        :items="[
            ['slug' => 'dashboard', 'label' => 'Dashboard', 'icon' => 'icons.home'],
            ['slug' => 'users', 'label' => 'Users', 'icon' => 'icons.users'],
            ['slug' => 'reports', 'label' => 'Reports', 'icon' => 'icons.chart-bar']
        ]" 
        model="activeTab" />
</div>

Props Reference

Prop	Type	Default	Description
items	array	[]	Required. Array of tab items. Each item should have slug (unique identifier), label (display text), and optional icon (icon component name).
model	string	selectedTab	Alpine.js model name for tracking the selected tab. Must match your x-data property.
ariaLabel	string	tab options	ARIA label for the tablist element for screen readers.
panelPrefix	string	tabpanel-	Prefix for tab panel IDs used in aria-controls attribute.

References

Category	Path / Name	Description
Component	resources/views/components/tabs.blade.php	Tabs component file

For the detailed documentation, please visit the Penguin UI Tabs.