Tabs

Organize content into switchable panels. Supports underline, segmented, and pill variants with optional icons.

Basic usage

Manage your account details, email address, and profile information.

Update your password and configure two-factor authentication.

Choose which notifications you want to receive and how.

<x-boson::tabs>
    <x-boson::tabs.list>
        <x-boson::tabs.tab name="account">Account</x-boson::tabs.tab>
        <x-boson::tabs.tab name="password">Password</x-boson::tabs.tab>
        <x-boson::tabs.tab name="notifications">Notifications</x-boson::tabs.tab>
    </x-boson::tabs.list>
    <x-boson::tabs.panel name="account">Account content...</x-boson::tabs.panel>
    <x-boson::tabs.panel name="password">Password content...</x-boson::tabs.panel>
    <x-boson::tabs.panel name="notifications">Notifications content...</x-boson::tabs.panel>
</x-boson::tabs>

With icons

View and edit your profile information.

Configure your application preferences.

Manage your subscription and payment methods.

<x-boson::tabs>
    <x-boson::tabs.list>
        <x-boson::tabs.tab name="profile" icon="user">Profile</x-boson::tabs.tab>
        <x-boson::tabs.tab name="settings" icon="cog-6-tooth">Settings</x-boson::tabs.tab>
        <x-boson::tabs.tab name="billing" icon="credit-card">Billing</x-boson::tabs.tab>
    </x-boson::tabs.list>
    <x-boson::tabs.panel name="profile">Profile content...</x-boson::tabs.panel>
    <x-boson::tabs.panel name="settings">Settings content...</x-boson::tabs.panel>
    <x-boson::tabs.panel name="billing">Billing content...</x-boson::tabs.panel>
</x-boson::tabs>

Segmented variant

Daily statistics and metrics overview.

Weekly trends and performance summary.

Monthly reports and historical data.

<x-boson::tabs>
    <x-boson::tabs.list variant="segmented">
        <x-boson::tabs.tab name="daily">Daily</x-boson::tabs.tab>
        <x-boson::tabs.tab name="weekly">Weekly</x-boson::tabs.tab>
        <x-boson::tabs.tab name="monthly">Monthly</x-boson::tabs.tab>
    </x-boson::tabs.list>
    <x-boson::tabs.panel name="daily">Daily content...</x-boson::tabs.panel>
    <x-boson::tabs.panel name="weekly">Weekly content...</x-boson::tabs.panel>
    <x-boson::tabs.panel name="monthly">Monthly content...</x-boson::tabs.panel>
</x-boson::tabs>

Small segmented

Showing all items.

Showing active items only.

Showing archived items.

<x-boson::tabs>
    <x-boson::tabs.list variant="segmented" size="sm">
        <x-boson::tabs.tab name="all">All</x-boson::tabs.tab>
        <x-boson::tabs.tab name="active">Active</x-boson::tabs.tab>
        <x-boson::tabs.tab name="archived">Archived</x-boson::tabs.tab>
    </x-boson::tabs.list>
    <x-boson::tabs.panel name="all">All items...</x-boson::tabs.panel>
    <x-boson::tabs.panel name="active">Active items...</x-boson::tabs.panel>
    <x-boson::tabs.panel name="archived">Archived items...</x-boson::tabs.panel>
</x-boson::tabs>

Pills variant

A high-level overview of your dashboard.

Detailed analytics and usage data.

Generated reports and exports.

<x-boson::tabs>
    <x-boson::tabs.list variant="pills">
        <x-boson::tabs.tab name="overview">Overview</x-boson::tabs.tab>
        <x-boson::tabs.tab name="analytics">Analytics</x-boson::tabs.tab>
        <x-boson::tabs.tab name="reports">Reports</x-boson::tabs.tab>
    </x-boson::tabs.list>
    <x-boson::tabs.panel name="overview">Overview content...</x-boson::tabs.panel>
    <x-boson::tabs.panel name="analytics">Analytics content...</x-boson::tabs.panel>
    <x-boson::tabs.panel name="reports">Reports content...</x-boson::tabs.panel>
</x-boson::tabs>

Default selected tab

Content for the first tab.

This tab is selected by default on page load.

Content for the third tab.

<x-boson::tabs>
    <x-boson::tabs.list>
        <x-boson::tabs.tab name="tab1">First</x-boson::tabs.tab>
        <x-boson::tabs.tab name="tab2" :selected="true">Second (default)</x-boson::tabs.tab>
        <x-boson::tabs.tab name="tab3">Third</x-boson::tabs.tab>
    </x-boson::tabs.list>
    <x-boson::tabs.panel name="tab1">First tab content...</x-boson::tabs.panel>
    <x-boson::tabs.panel name="tab2">This tab is selected by default.</x-boson::tabs.panel>
    <x-boson::tabs.panel name="tab3">Third tab content...</x-boson::tabs.panel>
</x-boson::tabs>

With trailing icons

Your received messages.

Messages you have sent.

Unsent draft messages.

<x-boson::tabs>
    <x-boson::tabs.list>
        <x-boson::tabs.tab name="inbox" icon:trailing="arrow-down-tray">Inbox</x-boson::tabs.tab>
        <x-boson::tabs.tab name="sent" icon:trailing="paper-airplane">Sent</x-boson::tabs.tab>
        <x-boson::tabs.tab name="drafts" icon:trailing="pencil-square">Drafts</x-boson::tabs.tab>
    </x-boson::tabs.list>
    <x-boson::tabs.panel name="inbox">Inbox content...</x-boson::tabs.panel>
    <x-boson::tabs.panel name="sent">Sent content...</x-boson::tabs.panel>
    <x-boson::tabs.panel name="drafts">Drafts content...</x-boson::tabs.panel>
</x-boson::tabs>

Props

tabs.list

Prop	Type	Default	Description
`variant`	`string`	`null`	Visual style of the tab list: segmented or pills
`size`	`string`	`null`	Size of segmented tabs: sm

tabs.tab

Prop	Type	Default	Description
`name`	`string`	`null`	Unique identifier linking this tab to its corresponding panel
`icon`	`string`	`null`	Leading icon name
`icon:trailing`	`string`	`null`	Trailing icon name
`selected`	`bool`	`false`	Pre-select this tab on page load

tabs.panel

Prop	Type	Default	Description
`name`	`string`	`null`	Identifier matching a tab name to display this panel when that tab is active