> ## Documentation Index
> Fetch the complete documentation index at: https://filament-34a8cf01.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Tabs Blade component

> [!WARNING]
>
> You are currently viewing the documentation for Filament 4.x, which is a previous version of Filament.
>
> Looking for the current stable version? Visit the [5.x documentation](https://filament-34a8cf01.mintlify.site/5.x/components/tabs.md).

## 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](https://filament-34a8cf01.mintlify.site/4.x/schemas/tabs.md).

```blade theme={"theme":"gruvbox-dark-hard"}
<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>
```

Loading preview

![Tabs with icons](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/components/tabs/simple.jpg)

## 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:

```blade theme={"theme":"gruvbox-dark-hard"}
<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:

```blade theme={"theme":"gruvbox-dark-hard"}
<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:

```blade theme={"theme":"gruvbox-dark-hard"}
<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](https://filament-34a8cf01.mintlify.site/4.x/styling/icons.md), which you can set using the `icon` attribute:

```blade theme={"theme":"gruvbox-dark-hard"}
<x-filament::tabs>
    <x-filament::tabs.item icon="heroicon-m-bell">
        Notifications
    </x-filament::tabs.item>

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

Loading preview

![Tabs with icons](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/components/tabs/icon.jpg)

### Setting the tab icon position

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

```blade theme={"theme":"gruvbox-dark-hard"}
<x-filament::tabs>
    <x-filament::tabs.item
        icon="heroicon-m-bell"
        icon-position="after"
    >
        Notifications
    </x-filament::tabs.item>

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

Loading preview

![Tabs with icons positioned after the label](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/components/tabs/icon-position-after.jpg)

## Setting a tab badge

Tabs may have a [badge](https://filament-34a8cf01.mintlify.site/4.x/components/badge.md), which you can set using the `badge` slot:

```blade theme={"theme":"gruvbox-dark-hard"}
<x-filament::tabs>
    <x-filament::tabs.item>
        Notifications

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

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

Loading preview

![Tabs with badges](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/components/tabs/badge.jpg)

## 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:

```blade theme={"theme":"gruvbox-dark-hard"}
<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:

```blade theme={"theme":"gruvbox-dark-hard"}
<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>
```

Loading preview

![Vertical tabs](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/components/tabs/vertical.jpg)

[Edit this page on GitHub](https://github.com/filamentphp/filament/edit/4.x/docs/12-components/03-tabs.md)

## Sponsored by

[Your logo here](https://github.com/sponsors/danharrin)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.