Tabs Blade component

Introduction

The tabs Blade component provides styled navigation links or buttons. It does not implement the keyboard behavior or content panels of an accessible tabset. For switching between schema content panels, use the schema tabs component.

<x-filament::tabs label="Content tabs">
    <x-filament::tabs.item>
        Tab 1
    </x-filament::tabs.item>

    <x-filament::tabs.item>
        Tab 2
    </x-filament::tabs.item>

    <x-filament::tabs.item>
        Tab 3
    </x-filament::tabs.item>
</x-filament::tabs>

Triggering the active state of the tab

By default, tabs do not appear “active”. To make a tab appear active, you can use the active attribute:

<x-filament::tabs>
    <x-filament::tabs.item active>
        Tab 1
    </x-filament::tabs.item>

    {{-- Other tabs --}}
</x-filament::tabs>

You can also use the active attribute to make a tab appear active conditionally:

<x-filament::tabs>
    <x-filament::tabs.item
        :active="$activeTab === 'tab1'"
        wire:click="$set('activeTab', 'tab1')"
    >
        Tab 1
    </x-filament::tabs.item>

    {{-- Other tabs --}}
</x-filament::tabs>

Or you can use the alpine-active attribute to make a tab appear active conditionally using Alpine.js:

<x-filament::tabs x-data="{ activeTab: 'tab1' }">
    <x-filament::tabs.item
        alpine-active="activeTab === 'tab1'"
        x-on:click="activeTab = 'tab1'"
    >
        Tab 1
    </x-filament::tabs.item>

    {{-- Other tabs --}}
</x-filament::tabs>

Setting a tab icon

Tabs may have an icon, which you can set using the icon attribute:

<x-filament::tabs>
    <x-filament::tabs.item icon="heroicon-m-bell">
        Notifications
    </x-filament::tabs.item>

    {{-- Other tabs --}}
</x-filament::tabs>

Setting the tab icon position

The icon of the tab may be positioned before or after the label using the icon-position attribute:

<x-filament::tabs>
    <x-filament::tabs.item
        icon="heroicon-m-bell"
        icon-position="after"
    >
        Notifications
    </x-filament::tabs.item>

    {{-- Other tabs --}}
</x-filament::tabs>

Setting a tab badge

Tabs may have a badge, which you can set using the badge slot:

<x-filament::tabs>
    <x-filament::tabs.item>
        Notifications

        <x-slot name="badge">
            5
        </x-slot>
    </x-filament::tabs.item>

    {{-- Other tabs --}}
</x-filament::tabs>

Using a tab as an anchor link

By default, a tab’s underlying HTML tag is <button>. You can change it to be an <a> tag by using the tag attribute:

<x-filament::tabs>
    <x-filament::tabs.item
        :href="route('notifications')"
        tag="a"
    >
        Notifications
    </x-filament::tabs.item>

    {{-- Other tabs --}}
</x-filament::tabs>

Do not add tablist or tabpanel roles to these navigation links.

Using vertical tabs

You can render the tabs vertically by using the vertical attribute:

<x-filament::tabs vertical>
    <x-filament::tabs.item>
        Tab 1
    </x-filament::tabs.item>

    <x-filament::tabs.item>
        Tab 2
    </x-filament::tabs.item>

    <x-filament::tabs.item>
        Tab 3
    </x-filament::tabs.item>
</x-filament::tabs>

Introduction

Guides

Resources

Tables

Schemas

Forms

Infolists

Actions

Notifications

Widgets

Configuration

Navigation

Users

Styling

Advanced

Testing

Plugins

Components

Deployment

Upgrading

Tabs Blade component

Introduction

Triggering the active state of the tab

Setting a tab icon

Setting the tab icon position

Setting a tab badge

Using a tab as an anchor link

Using vertical tabs

​Introduction

​Triggering the active state of the tab

​Setting a tab icon

​Setting the tab icon position

​Setting a tab badge

​Using a tab as an anchor link

​Using vertical tabs

Introduction

Triggering the active state of the tab

Setting a tab icon

Setting the tab icon position

Setting a tab badge

Using a tab as an anchor link

Using vertical tabs