hammadzafar05/mobile-bottom-nav

A thumb-friendly mobile bottom navigation bar for Filament panels. It programmatically integrates with the Filament navigation registry to provide a seamless, ergonomic mobile experience with full support for dark mode and safe-area insets.

v1.0.2 2026-02-24 07:51 UTC

Requires

• php: ^8.2
• filament/filament: ^4.0 || ^5.0
• spatie/laravel-package-tools: ^1.15.0

Requires (Dev)

• larastan/larastan: ^3.0
• laravel/pint: ^1.0
• nunomaduro/collision: ^8.0
• orchestra/testbench: ^9.0|^10.0
• pestphp/pest: ^3.7|^4.0
• pestphp/pest-plugin-arch: ^3.0|^4.0
• pestphp/pest-plugin-laravel: ^3.0|^4.0
• pestphp/pest-plugin-livewire: ^3.0|^4.0
• rector/rector: ^2.0
• spatie/laravel-ray: ^1.26

MIT

• Hammad Zafar

• laravel
• filament
• filament-plugin
• filamentphp
• hammadzafar05
• mobile-bottom-nav

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

Method	Default	Description
fromNavigation(int $limit)	3	Total number of bottom bar slots (includes the "More" button if enabled)
items(array $items)	null	Provide custom MobileBottomNavItem instances (disables auto-extraction)
moreButton(bool $enabled)	true	Show/hide the "More" button that opens the sidebar
moreButtonLabel(string $label)	'More' (translatable)	Customize the "More" button label
renderHook(string $hook)	PanelsRenderHook::BODY_END	Change which Filament render hook is used

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.