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:

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

Links

• GitHub:
• Package:

Contributing

1. Report issues on GitHub
2. Submit pull requests
3. Suggest new features

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