Organize content into separate panels within a single container. Easily switch between sections without leaving the page.
<flux:tab.group> <flux:tabs wire:model="tab"> <flux:tab name="profile">Profile</flux:tab> <flux:tab name="account">Account</flux:tab> <flux:tab name="billing">Billing</flux:tab> </flux:tabs> <flux:tab.panel name="profile">...</flux:tab.panel> <flux:tab.panel name="account">...</flux:tab.panel> <flux:tab.panel name="billing">...</flux:tab.panel></flux:tab.group>Associate tab labels with icons to visually distinguish different sections.
<flux:tab.group> <flux:tabs> <flux:tab name="profile" icon="user">Profile</flux:tab> <flux:tab name="account" icon="cog-6-tooth">Account</flux:tab> <flux:tab name="billing" icon="banknotes">Billing</flux:tab> </flux:tabs> <flux:tab.panel name="profile">...</flux:tab.panel> <flux:tab.panel name="account">...</flux:tab.panel> <flux:tab.panel name="billing">...</flux:tab.panel></flux:tab.group>By default, the tabs will have no horizontal padding around the edges. If you want to add padding you can do by adding Tailwind utilities to the tabs and/or tab.panel components.
<flux:tabs class="px-4"> <flux:tab name="profile">Profile</flux:tab> <flux:tab name="account">Account</flux:tab> <flux:tab name="billing">Billing</flux:tab></flux:tabs>Tab through content with visually separated, button-like tabs. Ideal for toggling between views inside a container with a constrained width.
<flux:tabs variant="segmented"> <flux:tab>List</flux:tab> <flux:tab>Board</flux:tab> <flux:tab>Timeline</flux:tab></flux:tabs>Combine segmented tabs with icon prefixes.
<flux:tabs variant="segmented"> <flux:tab icon="list-bullet">List</flux:tab> <flux:tab icon="squares-2x2">Board</flux:tab> <flux:tab icon="calendar-days">Timeline</flux:tab></flux:tabs>For more compact layouts, you can use the size="sm" prop to make the tabs smaller.
<flux:tabs variant="segmented" size="sm"> <flux:tab>Demo</flux:tab> <flux:tab>Code</flux:tab></flux:tabs>Tab through content with visually separated, pill-like tabs.
<flux:tabs variant="pills"> <flux:tab>List</flux:tab> <flux:tab>Board</flux:tab> <flux:tab>Timeline</flux:tab></flux:tabs>If you need, you can dynamically generate additional tabs and panels in your Livewire component. Just make sure you use matching names for the new tabs and panels.
<flux:tab.group> <flux:tabs> @foreach($tabs as $id => $tab) <flux:tab :name="$id">{{ $tab }}</flux:tab> @endforeach <flux:tab icon="plus" wire:click="addTab" action>Add tab</flux:tab> </flux:tabs> @foreach($tabs as $id => $tab) <flux:tab.panel :name="$id"> <!-- ... --> </flux:tab.panel> @endforeach</flux:tab.group><!-- Livewire component example code... public array $tabs = [ 'tab-1' => 'Tab #1', 'tab-2' => 'Tab #2', ]; public function addTab(): void { $id = 'tab-' . str()->random(); $this->tabs[$id] = 'Tab #' . count($this->tabs) + 1; }-->