PHPackages                             solution-forest/tab-layout-plugin - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Admin Panels](/categories/admin)
4. /
5. solution-forest/tab-layout-plugin

ActiveLibrary[Admin Panels](/categories/admin)

solution-forest/tab-layout-plugin
=================================

This plugin provides a flexible tab layout system for Filament Admin panels, enabling you to organize content into clean, navigable tabbed interfaces.

4.0.0(3mo ago)2714.7k↓25.9%5MITPHPPHP ^8.0CI passing

Since Mar 20Pushed 3mo ago1 watchersCompare

[ Source](https://github.com/solutionforest/filament-tab-plugin)[ Packagist](https://packagist.org/packages/solution-forest/tab-layout-plugin)[ Docs](https://github.com/solution-forest/tab-layout-plugin)[ RSS](/packages/solution-forest-tab-layout-plugin/feed)WikiDiscussions 4.x Synced 1mo ago

READMEChangelog (10)Dependencies (17)Versions (23)Used By (0)

[![](https://github.com/solutionforest/.github/raw/main/docs/images/sf.png?raw=true)](https://solutionforest.com)

About Solution Forest
---------------------

[](#about-solution-forest)

[Solution Forest](https://solutionforest.com) Web development agency based in Hong Kong. We help customers to solve their problems. We Love Open Soruces.

We have built a collection of best-in-class products:

- [InspireCMS](https://inspirecms.net): A full-featured Laravel CMS with everything you need out of the box. Build smarter, ship faster with our complete content management solution.
- [Filaletter](https://filaletter.solutionforest.net): Filaletter - Filament Newsletter Plugin
- [Website CMS Management](https://filamentphp.com/plugins/solution-forest-cms-website): A hands-on Filament CMS plugin for those who prefer more manual control over their website content management.

Tab Layout Plugin
=================

[](#tab-layout-plugin)

[![Latest Version on Packagist](https://camo.githubusercontent.com/80d3eeb4a9b130351a608e28d5e614d9079b36070c675133ad31dc1f34047f1b/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f736f6c7574696f6e2d666f726573742f7461622d6c61796f75742d706c7567696e2e737667)](https://packagist.org/packages/solution-forest/tab-layout-plugin)[![Total Downloads](https://camo.githubusercontent.com/80bec092a67d440709b210d6c763360ea1ada9fc93d86dd63f9f865d1cd30d29/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f736f6c7574696f6e2d666f726573742f7461622d6c61796f75742d706c7567696e2e737667)](https://packagist.org/packages/solution-forest/tab-layout-plugin)

This plugin provides a flexible tab layout system for Filament Admin panels, enabling you to organize content into clean, navigable tabbed interfaces.

Create simple tabs with individual Livewire components or build complex multi-content tabs containing HTML, strings, and multiple components. Features include customizable icons and badges, external link tabs, URL persistence, and full integration with Filament's widget system.

[![Tab Layout Plugin](https://private-user-images.githubusercontent.com/68525320/473426338-eb460622-3152-488f-8a3e-d93bd7cfadad.jpg?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzQ2ODAzOTEsIm5iZiI6MTc3NDY4MDA5MSwicGF0aCI6Ii82ODUyNTMyMC80NzM0MjYzMzgtZWI0NjA2MjItMzE1Mi00ODhmLThhM2UtZDkzYmQ3Y2ZhZGFkLmpwZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNjAzMjglMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjYwMzI4VDA2NDEzMVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTZlNTczZmVlMzFmZjI2ZjBlYTIzYzI2NGM4ZjdmYjRmNjI0ZWMyYzVlMGU4ZmNiYTFjMjk0ZThmNjIwOTE1MmYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.xFneNDy5WkhIuON4WNEUq8-w3xly3trApcLJRw1-6ps)](https://private-user-images.githubusercontent.com/68525320/473426338-eb460622-3152-488f-8a3e-d93bd7cfadad.jpg?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzQ2ODAzOTEsIm5iZiI6MTc3NDY4MDA5MSwicGF0aCI6Ii82ODUyNTMyMC80NzM0MjYzMzgtZWI0NjA2MjItMzE1Mi00ODhmLThhM2UtZDkzYmQ3Y2ZhZGFkLmpwZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNjAzMjglMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjYwMzI4VDA2NDEzMVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTZlNTczZmVlMzFmZjI2ZjBlYTIzYzI2NGM4ZjdmYjRmNjI0ZWMyYzVlMGU4ZmNiYTFjMjk0ZThmNjIwOTE1MmYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.xFneNDy5WkhIuON4WNEUq8-w3xly3trApcLJRw1-6ps)

Demo site :

Demo username :

Demo password : 12345678 Auto Reset every hour.

Supported Filament versions
---------------------------

[](#supported-filament-versions)

Filament VersionPlugin Versionv21.x.xv32.x.xv43.x.xv54.x.xInstallation
------------

[](#installation)

You can install the package via composer:

```
composer require solution-forest/tab-layout-plugin
```

Optionally, you can publish the views using

```
php artisan vendor:publish --tag="tab-layout-plugin-views"
```

Usage
-----

[](#usage)

### Create a Simple Tab Widget

[](#create-a-simple-tab-widget)

Create tabbed interfaces with individual Livewire components using the `TabsWidget::make()` method. This is the quickest way to get started with basic tab functionality.

#### Step 1: Register the TabsWidget

[](#step-1-register-the-tabswidget)

First, register the `TabsWidget` in your Filament panel provider:

```