Mahmoud Al-HabashOpen to new projects
  • WorkWork
  • ServicesServices
  • LabLab
  • WritingWriting
  • ContactContact
Amman--:--عربي
Writing/Livewire

Building Tabs with Livewire v4

Create dynamic tab interfaces.

1 February 20261 min readLivewireاقرأ بالعربية

On this page

  1. Component

Build a tabbed interface.

Component

php
@php
use Livewire\Attributes\Url;

new class extends Livewire\Component {
    #[Url]
    public string $activeTab = 'overview';
}
@endphp

<div>
    <nav>
        @foreach(['overview', 'details', 'reviews'] as $tab)
            <button 
                wire:click="$set('activeTab', '{{ $tab }}')"
                class="{{ $activeTab === $tab ? 'active' : '' }}">
                {{ ucfirst($tab) }}
            </button>
        @endforeach
    </nav>
    
    @if($activeTab === 'overview')
        <div>Overview content</div>
    @endif
</div>
All articles

Keep reading

  • Authorization in Livewire v4 Components1 February 20261 min read
  • Blaze Pre-Compiler: Massive Performance Gains in Livewire v41 February 20261 min read
  • Building a Bookmark Feature with Livewire v41 February 20261 min read