FilamentPHP Vertical Tabs Layout

AdminPanelProvider.php

<?php

final class AdminPanelProvider extends PanelProvider
{
    public function panel(Panel $panel): Panel
    {
        return $panel
            ->assets([
                Css::make('vertical-tabs', resource_path('css/vertical-tabs.css')),
            ])
            // ...
     }
}

vertical-tabs.css

/* Make the main container use horizontal layout */
.fi-fo-tabs.flex.flex-col {
    flex-direction: row !important;
}

/* Make the nav vertical and positioned on left */
.fi-tabs.flex {
    flex-direction: column !important;
    width: 12rem !important; /* w-48 equivalent */
    max-width: none !important;
    gap: 0.25rem 0 !important; /* gap-y-1 */
    overflow-x: visible !important;
    overflow-y: auto !important;
    border-bottom: none !important;
    border-right: 1px solid rgb(229 231 235) !important; /* border-r border-gray-200 */
    padding: 0.75rem 0.625rem !important; /* py-3 px-2.5 */
}

/* Dark mode border */
.dark .fi-tabs.flex {
    border-right-color: rgb(255 255 255 / 0.1) !important;
}

/* Make tab buttons full width and left-aligned */
.fi-tabs-item {
    width: 100% !important;
    justify-content: flex-start !important;
}

/* Make tab content take remaining space */
.fi-fo-tabs-tab {
    flex: 1 !important;
}

/* Ensure content area has proper overflow handling */
.fi-fo-tabs-tab.fi-active {
    overflow: visible !important;
    height: auto !important;
}