Tabs - Laravel Blade

Use the tabs component to navigate between grouped content by switching between tabs, available in multiple styles including default, underline, pills, and full-width variants.

Default Tabs

Blade code

<x-fwb.tabs id="default-tabs" variant="default">
    <x-fwb.tabs.item :active="true" variant="default">Profile</x-fwb.tabs.item>
    <x-fwb.tabs.item variant="default">Dashboard</x-fwb.tabs.item>
    <x-fwb.tabs.item variant="default">Settings</x-fwb.tabs.item>
    <x-fwb.tabs.item variant="default">Contacts</x-fwb.tabs.item>
    <x-fwb.tabs.item :disabled="true" variant="default">Disabled</x-fwb.tabs.item>
</x-fwb.tabs>

Tabs with Underline

Blade code

<x-fwb.tabs id="underline-tabs" variant="underline">
    <x-fwb.tabs.item :active="true" variant="underline">Profile</x-fwb.tabs.item>
    <x-fwb.tabs.item variant="underline">Dashboard</x-fwb.tabs.item>
    <x-fwb.tabs.item variant="underline">Settings</x-fwb.tabs.item>
    <x-fwb.tabs.item variant="underline">Contacts</x-fwb.tabs.item>
    <x-fwb.tabs.item :disabled="true" variant="underline">Disabled</x-fwb.tabs.item>
</x-fwb.tabs>

Tabs with Icons

Blade code

<x-fwb.tabs id="icon-tabs" variant="underline">
    <x-fwb.tabs.item :active="true" variant="underline" fwb-icon="s-user-circle">Profile</x-fwb.tabs.item>
    <x-fwb.tabs.item variant="underline" fwb-icon="o-grid">Dashboard</x-fwb.tabs.item>
    <x-fwb.tabs.item variant="underline" fwb-icon="o-adjustments-horizontal">Settings</x-fwb.tabs.item>
    <x-fwb.tabs.item variant="underline" fwb-icon="s-user-circle">Contacts</x-fwb.tabs.item>
</x-fwb.tabs>

Tabs with Icons (Slot)

Blade code

<x-fwb.tabs id="icon-slot-tabs" variant="underline">
    <x-fwb.tabs.item :active="true" variant="underline">
        <x-slot name="icon"><x-fwb-s-user-circle class="w-4 h-4 me-2 text-body-subtle" /></x-slot>
        Profile
    </x-fwb.tabs.item>
    <x-fwb.tabs.item variant="underline">
        <x-slot name="icon"><x-fwb-o-grid class="w-5 h-5 me-2 text-danger" /></x-slot>
        Dashboard
    </x-fwb.tabs.item>
    <x-fwb.tabs.item variant="underline">
        <x-slot name="icon"><x-fwb-o-adjustments-horizontal class="w-4 h-4 me-2 text-body-subtle" /></x-slot>
        Settings
    </x-fwb.tabs.item>
    <x-fwb.tabs.item variant="underline">
        <x-slot name="icon"><x-fwb-s-user-circle class="w-4 h-4 me-2 text-body-subtle" /></x-slot>
        Contacts
    </x-fwb.tabs.item>
</x-fwb.tabs>

Pills

Blade code

<x-fwb.tabs id="pills-tabs" variant="pills">
    <x-fwb.tabs.item :active="true" variant="pills">Profile</x-fwb.tabs.item>
    <x-fwb.tabs.item variant="pills">Dashboard</x-fwb.tabs.item>
    <x-fwb.tabs.item variant="pills">Settings</x-fwb.tabs.item>
    <x-fwb.tabs.item :disabled="true" variant="pills">Disabled</x-fwb.tabs.item>
</x-fwb.tabs>

Full Width Tabs

Blade code

<x-fwb.tabs id="full-tabs" variant="full">
    <x-fwb.tabs.item :active="true" variant="full">Profile</x-fwb.tabs.item>
    <x-fwb.tabs.item variant="full">Dashboard</x-fwb.tabs.item>
    <x-fwb.tabs.item variant="full">Settings</x-fwb.tabs.item>
    <x-fwb.tabs.item variant="full">Invoice</x-fwb.tabs.item>
</x-fwb.tabs>

Custom Active Color

Blade code

<x-fwb.tabs id="custom-tabs" variant="underline" activeClasses="text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500" inactiveClasses="text-gray-500 border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300">
    <x-fwb.tabs.item :active="true" variant="underline">Profile</x-fwb.tabs.item>
    <x-fwb.tabs.item variant="underline">Dashboard</x-fwb.tabs.item>
    <x-fwb.tabs.item variant="underline">Settings</x-fwb.tabs.item>
    <x-fwb.tabs.item variant="underline">Contacts</x-fwb.tabs.item>
</x-fwb.tabs>

Component Properties

Tabs x-fwb.tabs

Prop Type Default Description
id string auto Unique identifier for the tabs container. Auto-generated if not provided.
variant string default Tab style variant: default, underline, pills, or full.
activeClasses string|null null Custom Tailwind CSS classes for the active tab state.
inactiveClasses string|null null Custom Tailwind CSS classes for inactive tab states.

Tabs Item x-fwb.tabs.item

Prop Type Default Description
id string auto Unique identifier for the tab item. Auto-generated if not provided.
active bool false Mark the tab as currently selected.
disabled bool false Disable the tab so it cannot be clicked.
variant string default Must match the parent tabs variant to apply correct styling.
fwb-icon string|null null Shorthand icon name from flowbite-blade-icons (e.g. s-user-circle). Renders with default w-4 h-4 me-2 text-body-subtle classes.
icon slot — Named slot for full icon control. Takes priority over fwb-icon prop.