Moving Global Search to Sidebar

Filament 4/5
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:

Only This Example

$9

One-time payment

Full source code for Moving Global Search to Sidebar
Downloadable ZIP file with the source code
Lifetime access to this example
GitHub Sign in with GitHub to buy

Sign in first, then complete your $9 checkout.

Best value — all 172 examples

FilamentExamples Membership

$99 /year
or
$199 lifetime
Access to code of all 172 examples
Future new examples and updates included
FilaCheck Pro package licence included
MCP server included
View membership plans

30-day money-back guarantee

How it works

Since Filament v4.1, moving search to the sidebar can be done by setting it in the Panel Provider. Check the official documentation

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.