Moving Global Search to Sidebar

Filament 4
Also available in Filament 3 version

Sometimes, we do not want things to be placed in the default position. In this case, we are talking about a search bar. But did you know that you can easily move it to the sidebar?

01J176H021HBA3HA22J9B1353M

Get the Source Code:

How it works

To show search in the sidebar, we use the SIDEBAR_NAV_START Render Hook to add a GlobalSearch Livewire component.

app/Providers/AppServiceProvider.php:

use Filament\View\PanelsRenderHook;
use Illuminate\Support\Facades\Blade;
use Illuminate\Support\ServiceProvider;
use Filament\Support\Facades\FilamentView;
 
class AppServiceProvider extends ServiceProvider
{
// ...
 
public function boot(): void
{
FilamentView::registerRenderHook(
PanelsRenderHook::SIDEBAR_NAV_START,
fn (): string => Blade::render('@livewire(Filament\Livewire\GlobalSearch::class, [\'lazy\' => true])'),
);
}
}

To fix the styling issue, a custom theme must be created and registered.

The FULL tutorial is available after the purchase: in the Readme file of the official repository you would get invited to.
Get the Source Code: All 152 Premium Examples for $99