Skip to content

Pro Component — This component requires an Aura UI Pro license.

Overview

The Tabs component organizes content into multiple panels, each accessible via a tab button. Only one panel is visible at a time. Tabs support icons, notification badges, disabled states, and multiple visual variants. Built with Alpine.js for instant client-side switching without page reloads.

Basic Usage

General settings content here.
Security settings content here. 
<x-aura::tabs :tabs="[
    ['name' => 'general', 'label' => 'General'],
    ['name' => 'security', 'label' => 'Security'],
]">
    <x-aura::tabs.tab name="general">
        General settings content here.
    </x-aura::tabs.tab>

    <x-aura::tabs.tab name="security">
        Security settings content here.
    </x-aura::tabs.tab>
</x-aura::tabs>

Props

Tabs (root)

Prop Type Default Description
tabs array [] Array of tab definitions. Each item: ['name' => '', 'label' => '', 'icon' => '', 'badge' => '', 'disabled' => false].
variant string 'default' Visual style: default, pills, bordered, vertical.
defaultTab string|null null Name of the initially active tab. Defaults to the first tab.

Tab Definition Keys

Key Type Required Description
name string Yes Unique identifier, must match the name prop on the corresponding tabs.tab panel.
label string No Display text for the tab button. Falls back to name if omitted.
icon string No Heroicon name displayed before the label.
badge string|int No Badge text or count displayed after the label.
disabled bool No Disable the tab, preventing selection.

Tabs Tab (panel)

Prop Type Default Description
name string '' Must match the name key in the parent's tabs array.

Examples

Settings Page with Icons and Badges

Manage your subscription and payment methods.

<x-aura::tabs :tabs="[
    ['name' => 'profile', 'label' => 'Profile', 'icon' => 'user'],
    ['name' => 'security', 'label' => 'Security', 'icon' => 'shield'],
    ['name' => 'notifications', 'label' => 'Notifications', 'icon' => 'bell', 'badge' => '3'],
    ['name' => 'billing', 'label' => 'Billing', 'icon' => 'credit-card', 'disabled' => true],
]">
    <x-aura::tabs.tab name="profile">
        Profile content...
    </x-aura::tabs.tab>

    <x-aura::tabs.tab name="security">
        Security content...
    </x-aura::tabs.tab>

    <x-aura::tabs.tab name="notifications">
        Notifications content...
    </x-aura::tabs.tab>

    <x-aura::tabs.tab name="billing">
        Billing content...
    </x-aura::tabs.tab>
</x-aura::tabs>

Content Sections with Disabled Tab

<x-aura::tabs :tabs="[
    ['name' => 'published', 'label' => 'Published', 'badge' => $publishedCount],
    ['name' => 'drafts', 'label' => 'Drafts', 'badge' => $draftCount],
    ['name' => 'scheduled', 'label' => 'Scheduled', 'disabled' => true],
]">
    <x-aura::tabs.tab name="published">
        @foreach($publishedPosts as $post)
            <div class="border-b py-3">
                <h3 class="font-medium">{{ $post->title }}</h3>
            </div>
        @endforeach
    </x-aura::tabs.tab>

    <x-aura::tabs.tab name="drafts">
        @foreach($draftPosts as $post)
            <div class="border-b py-3">
                <h3 class="font-medium">{{ $post->title }}</h3>
            </div>
        @endforeach
    </x-aura::tabs.tab>

    <x-aura::tabs.tab name="scheduled">
        Scheduling feature coming soon.
    </x-aura::tabs.tab>
</x-aura::tabs>

Icons Only (No Text)

List view content.
Grid view content. 
<x-aura::tabs :tabs="[
    ['name' => 'list', 'label' => '', 'icon' => 'list'],
    ['name' => 'grid', 'label' => '', 'icon' => 'grid'],
]">
    <x-aura::tabs.tab name="list">
        List view content.
    </x-aura::tabs.tab>

    <x-aura::tabs.tab name="grid">
        Grid view content.
    </x-aura::tabs.tab>
</x-aura::tabs>

Default Active Tab

Overview content.
Details content (active by default).
Reviews content. 
<x-aura::tabs :tabs="[...]" defaultTab="details">
    ...
</x-aura::tabs>

Slots

Slot Component Description
default tabs Contains tabs.tab panel children.
default tabs.tab The panel content displayed when this tab is active.

Accessibility

  • The tab list uses role="tablist".
  • Each tab button uses role="tab" with aria-selected reflecting the active state.
  • Tab panels use role="tabpanel".
  • Disabled tabs have the disabled attribute and are skipped in keyboard navigation.
  • Click on a tab button activates the corresponding panel.
  • Badge counts are rendered inline with the tab button label.