© 2026 Hedgehog Software, LLC

TwitterGitHubDiscord
More
CommunitiesDocsAboutTermsPrivacy
Search
Star
Setup for Free
FilamentF
Filament•9mo ago
KingStalker

How to customize getTabs() layout for mobile view?

Hey! I'm using Filament with getTabs() in my Livewire component. On mobile, the tabs scroll horizontally, but I’d prefer a layout that’s more like a vertical stack or tag-style — just something easier to tap through on smaller screens.

I’m not the best when it comes to CSS or custom styling is there a simple way to tweak the layout for mobile? Any tips or direction would be awesome!


public function getDefaultActiveTab(): string|int|null
{
    return 'all';
}

public function getTabs(): array
{
    $user = Auth::user();

    $badgeCounts = $user->isAdmin()
        ? Wash::selectRaw('status, COUNT(*) as count')
            ->groupBy('status')
            ->pluck('count', 'status')
        : Wash::where('user_id', Auth::id())
            ->selectRaw('status, COUNT(*) as count')
            ->groupBy('status')
            ->pluck('count', 'status');

    return [
        'all' => Tab::make()
            ->label('All')
            ->icon('fas-list')
            ->badge($badgeCounts->sum())
            ->badgeColor('success')
            ->modifyQueryUsing(fn (Builder $query) => $query),

        ...collect(WashStatus::cases())->mapWithKeys(fn ($status) => [
            strtolower($status->value) => Tab::make()
                ->label($status->getLabel())
                ->icon($status->getIcon())
                ->badge($badgeCounts[$status->value] ?? 0)
                ->badgeColor($status->getSummaryColor())
                ->modifyQueryUsing(fn (Builder $query) => $query->where('status', $status->value)),
        ])->toArray(),
    ];
}
public function getDefaultActiveTab(): string|int|null
{
    return 'all';
}

public function getTabs(): array
{
    $user = Auth::user();

    $badgeCounts = $user->isAdmin()
        ? Wash::selectRaw('status, COUNT(*) as count')
            ->groupBy('status')
            ->pluck('count', 'status')
        : Wash::where('user_id', Auth::id())
            ->selectRaw('status, COUNT(*) as count')
            ->groupBy('status')
            ->pluck('count', 'status');

    return [
        'all' => Tab::make()
            ->label('All')
            ->icon('fas-list')
            ->badge($badgeCounts->sum())
            ->badgeColor('success')
            ->modifyQueryUsing(fn (Builder $query) => $query),

        ...collect(WashStatus::cases())->mapWithKeys(fn ($status) => [
            strtolower($status->value) => Tab::make()
                ->label($status->getLabel())
                ->icon($status->getIcon())
                ->badge($badgeCounts[$status->value] ?? 0)
                ->badgeColor($status->getSummaryColor())
                ->modifyQueryUsing(fn (Builder $query) => $query->where('status', $status->value)),
        ])->toArray(),
    ];
}
screenshot3.png
Filament banner
FilamentJoin
A powerful open source UI framework for Laravel • Build and ship admin panels & apps fast with Livewire
20,307Members
Resources
Was this page helpful?

Similar Threads

Recent Announcements

Similar Threads

List view customize
FilamentFFilament / ❓┊help
3y ago
getTabs()
FilamentFFilament / ❓┊help
2y ago
getTabs()
FilamentFFilament / ❓┊help
3y ago
RegisterTenant View layout
FilamentFFilament / ❓┊help
2y ago