Tabs

A set of layered sections of content, known as tab panels, that are displayed one at a time.

Examples

Horizontal (Top)

blade

<x-plume::form 
    formData="{ 'currentTab': '1' }">
    <x-plume::tabs model="currentTab" class="w-full">
        <x-plume::tabs.group>
            <x-plume::tabs.item for="1" dusk="tab-1">First</x-plume::tabs.item>
            <x-plume::tabs.item for="2" dusk="tab-2">Second</x-plume::tabs.item>
            <x-plume::tabs.item for="3" dusk="tab-3">Third</x-plume::tabs.item>
        </x-plume::tabs.group>
        <x-plume::tabs.panel for="1">
            <p class="text-foreground/80 dark:text-background-200">Content of the first tab.</p>
        </x-plume::tabs.panel>
        ...
    </x-plume::tabs>
</x-plume::form>

Left Side

Content of the first tab.

Content of the second tab.

Content of the third tab.

blade

<x-plume::tabs default="1" side="left" class="w-full">
    <x-plume::tabs.group>
        <x-plume::tabs.item for="1">First</x-plume::tabs.item>
        <x-plume::tabs.item for="2">Second</x-plume::tabs.item>
        <x-plume::tabs.item for="3">Third</x-plume::tabs.item>
    </x-plume::tabs.group>
    <x-plume::tabs.panel for="1">
        <p class="text-foreground/80 dark:text-background-200">Content of the first tab.</p>
    </x-plume::tabs.panel>
    ...
</x-plume::tabs>

Right Side

Content of the first tab.

Content of the second tab.

Content of the third tab.

blade

<x-plume::tabs default="1" side="right" class="w-full">
    <x-plume::tabs.group>
        <x-plume::tabs.item for="1">First</x-plume::tabs.item>
        <x-plume::tabs.item for="2">Second</x-plume::tabs.item>
        <x-plume::tabs.item for="3">Third</x-plume::tabs.item>
    </x-plume::tabs.group>
    <x-plume::tabs.panel for="1">
        <p class="text-foreground/80 dark:text-background-200">Content of the first tab.</p>
    </x-plume::tabs.panel>
    ...
</x-plume::tabs>

Prop	Type	Default	Description
default	string	'1'	The key of the tab to be active by default.
model	string	null	AlpineJS model name for the active tab.
side	string	'top'	Side to display the tab list: 'top', 'bottom', 'left', 'right'.
size	string	'md'	Size of the tabs: 'sm', 'md', 'lg'.
style	string	'default'	Visual style: 'default', 'pill', 'outline'.
shape	string	'default'	Shape: 'default', 'round', 'square'.
onTabChange	string	null	AlpineJS expression or function to call when the active tab changes.

Usage

blade

<x-plume::tabs default="profile" side="left">
    <x-plume::tabs.group>
        <x-plume::tabs.item for="profile">Profile</x-plume::tabs.item>
        <x-plume::tabs.item for="settings">Settings</x-plume::tabs.item>
    </x-plume::tabs.group>

    <x-plume::tabs.panel for="profile">
        Profile content...
    </x-plume::tabs.panel>
    <x-plume::tabs.panel for="settings">
        Settings content...
    </x-plume::tabs.panel>
</x-plume::tabs>