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

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