Mobile Bottom Navigation

• Screenshots
  • Light Mode
  • Dark Mode
• Installation
• Usage
• Configuration
  • Navigation Limit & More Button
  • Sidebar Toggle
  • Custom Items
  • Conditional Visibility
  • All Options
  • Publishing Views
• Testing
• Related
• Changelog
• Contributing
• Security Vulnerabilities
• Credits
• License

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.

Filament 4.11.5+ or 5.6.5+ is recommended. Earlier releases in both majors carry four published advisories, the most serious an unauthenticated temporary file upload on auth pages. This plugin works with any 4.x or 5.x, so the constraint stays ^4.0 || ^5.0 — which framework patch level you run is your application's decision. composer audit will tell you where you stand.

#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)

#Sidebar Toggle

While the bottom bar is on screen, its "More" button already opens the sidebar, so Filament's own topbar hamburger is redundant — the plugin hides it below 1024px by default. It is only hidden when the bar actually rendered and the "More" button is enabled, so the sidebar always stays reachable.

If you disable the "More" button, keep the hamburger:

MobileBottomNav::make()
    ->moreButton(false)
    ->hideSidebarToggle(false)

Hiding the hamburger is the one place this plugin reaches beyond the bar itself. If you want the rest of the panel to match (tables that stack instead of scrolling sideways, action buttons within thumb reach, modals that open as slide-overs), filament-mobile-preset bundles this plugin together with defaults for those.

#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

#Related

This bar fixes navigation, and deliberately nothing else. On a phone your tables still scroll sideways, action buttons still sit at the far edge of the screen, and modals still open as centred dialogs.

filament-mobile-preset bundles this plugin together with defaults for those, for panels that want the whole thing to feel mobile-first. Same author, same no-build-step approach.

#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.