README

A thumb-friendly mobile bottom navigation bar for Filament panels. Automatically extracts items from your Filament navigation and renders a fixed bottom bar on mobile viewports — with full support for dark mode, safe-area insets, badges, and sidebar integration.

Supports Filament v4 and v5.

Screenshots

Light Mode

Dark Mode

Installation

composer require hammadzafar05/mobile-bottom-nav

That's it. No custom theme or additional CSS configuration is required.

Usage

Register the plugin in your panel provider:

use Hammadzafar05\MobileBottomNav\MobileBottomNav;

public function panel(Panel $panel): Panel
{
    return $panel
        ->plugins([
            MobileBottomNav::make(),
        ]);
}

The plugin automatically extracts your top navigation items and displays them in a bottom bar on mobile screens. On desktop, it stays hidden.

Configuration

All configuration is optional and done via a fluent API.

Navigation Limit & More Button

By default, the plugin shows 2 navigation items + a "More" button that opens the sidebar. You can adjust the total number of slots:

MobileBottomNav::make()
    ->fromNavigation(5)     // 4 nav items + 1 More button

To disable the "More" button entirely:

MobileBottomNav::make()
    ->fromNavigation(4)     // 4 nav items, no More button
    ->moreButton(false)

Custom Items

Provide your own items instead of extracting from the navigation registry:

use Hammadzafar05\MobileBottomNav\MobileBottomNav;
use Hammadzafar05\MobileBottomNav\MobileBottomNavItem;

MobileBottomNav::make()
    ->items([
        MobileBottomNavItem::make('Home')
            ->icon('heroicon-o-home')
            ->activeIcon('heroicon-s-home')
            ->url('/admin')
            ->isActive(fn () => request()->is('admin')),
        MobileBottomNavItem::make('Inbox')
            ->icon('heroicon-o-inbox')
            ->url('/admin/inbox')
            ->badge(5, 'danger'),
        MobileBottomNavItem::make('Profile')
            ->icon('heroicon-o-user')
            ->url('/admin/profile'),
    ])

Conditional Visibility

Items support conditional visibility:

MobileBottomNavItem::make('Admin')
    ->icon('heroicon-o-shield-check')
    ->url('/admin/settings')
    ->visible(fn () => auth()->user()?->isAdmin())

All Options

Publishing Views

If you need to customize the Blade template:

php artisan vendor:publish --tag="mobile-bottom-nav-views"

Testing

composer test

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

• Hammad Zafar
• All Contributors

License

The MIT License (MIT). Please see License File for more information.