Livewire Tabs: A Clean, Accessible Tabbed Interface in Blade

Tabs organise a busy screen into digestible sections — profile, security, billing — without a full page navigation. They look simple, but an accessible tabbed interface needs the right ARIA roles and keyboard support. This guide builds tabs in Blade with Alpine.js, and shows when to keep tab state on the server with Livewire.

Client-side tabs with Alpine

For purely presentational tabs, Alpine.js is perfect — the active tab is just a local value, no server round-trip needed. The Aura UI tabs component wraps this with the correct roles and keyboard handling:

<x-aura::tabs default="profile">
    <x-aura::tabs.list>
        <x-aura::tabs.tab name="profile">Profile</x-aura::tabs.tab>
        <x-aura::tabs.tab name="security">Security</x-aura::tabs.tab>
        <x-aura::tabs.tab name="billing">Billing</x-aura::tabs.tab>
    </x-aura::tabs.list>

    <x-aura::tabs.panel name="profile">
        Your profile settings…
    </x-aura::tabs.panel>
    <x-aura::tabs.panel name="security">
        Your security settings…
    </x-aura::tabs.panel>
    <x-aura::tabs.panel name="billing">
        Your billing settings…
    </x-aura::tabs.panel>
</x-aura::tabs>

That renders a role="tablist" with arrow-key navigation between tabs, aria-selected on the active one, and role="tabpanel" for the content — the details that make tabs usable with a keyboard and a screen reader.

When to keep tab state on the server

Client-side tabs reset on reload. Sometimes you want the active tab to persist — for example, after a form submit you want to stay on the "Security" tab. In that case, drive the tab from a Livewire property and bind it:

public string $tab = 'profile';

<x-aura::tabs wire:model="tab">
    {{-- same tabs/panels as above --}}
</x-aura::tabs>

Now the active tab survives Livewire round-trips, and you can even sync it to the URL with Livewire's #[Url] attribute so a refresh or a shared link lands on the right tab.

The rule of thumb

• Presentational, no persistence needed? Let Alpine handle it — zero server cost.
• Tab must survive reloads or actions? Bind it to a Livewire property.

Both use the same accessible component, part of Aura's WCAG 2.1 AA component set.

composer require bluestarsystem/aura-ui
php artisan aura:install

Want to see tabs alongside forms, tables and modals in a real layout? The free dashboard starter is the fastest way in.