Dev.to

Filament Vertical Tabs

Filament Vertical Tabs Package A Filament v3 package that adds vertical tabs functionality with a mobile-responsive interface. Features Vertical tabs layout for Filament forms Responsive design with mobile navigation Previous/next buttons for easy tab navigation on mobile Smooth transitions between tabs RTL support Dark mode support Requirements PHP 8.1+ Laravel 11.0+ Filament v3.0+ Installation You can install the package via Composer: composer require afs19/filament-vertical-tabs Usage Basic Usage use Filament\Forms\Components\Tabs; use Filament\Forms\Components\Tabs\Tab; Tabs::make('Settings') ->vertical() // This activates the vertical tabs layout ->tabs([ Tab::make('General') ->icon('heroicon-o-cog') ->schema([ // Your form components here ]), Tab::make('Notifications') ->icon('heroicon-o-bell') ->schema([ // Your form components here ]), ]); Customization You can publish the views for customization: php artisan vendor:publish --tag=filament-vertical-tabs-views How It Works This package adds a vertical() macro to Filament's Tabs component that: Sets the tabs to use a vertical layout Overrides the default Tabs view Adds mobile responsiveness with sliding navigation Maintains all native Filament tabs functionality Links GitHub: Package: Contributing Report issues on GitHub Submit pull requests Suggest new features # Development setup git clone https://github.com/AFS19/filament-vertical-tabs cd filament-vertical-tabs composer install

Apr 12, 2025 - 17:07

Filament Vertical Tabs Package

A Filament v3 package that adds vertical tabs functionality with a mobile-responsive interface.

Features

Vertical tabs layout for Filament forms
Responsive design with mobile navigation
Previous/next buttons for easy tab navigation on mobile
Smooth transitions between tabs
RTL support
Dark mode support

Requirements

PHP 8.1+
Laravel 11.0+
Filament v3.0+

Installation

You can install the package via Composer:

composer require afs19/filament-vertical-tabs

Usage

Basic Usage

use Filament\Forms\Components\Tabs;
use Filament\Forms\Components\Tabs\Tab;

Tabs::make('Settings')
    ->vertical() // This activates the vertical tabs layout
    ->tabs([
        Tab::make('General')
            ->icon('heroicon-o-cog')
            ->schema([
                // Your form components here
            ]),
        Tab::make('Notifications')
            ->icon('heroicon-o-bell')
            ->schema([
                // Your form components here
            ]),
    ]);

Customization

You can publish the views for customization:

php artisan vendor:publish --tag=filament-vertical-tabs-views

How It Works

This package adds a vertical() macro to Filament's Tabs component that:

Sets the tabs to use a vertical layout
Overrides the default Tabs view
Adds mobile responsiveness with sliding navigation
Maintains all native Filament tabs functionality

Contributing

Report issues on GitHub
Submit pull requests
Suggest new features

# Development setup
git clone https://github.com/AFS19/filament-vertical-tabs
cd filament-vertical-tabs
composer install