[SOLVED] Add Dropdown element to Laravel Filament top bar

Add Dropdown element to Laravel Filament top bar

Hi Everyone,

I'm working on a project with Laravel Filament and I'm looking to enhance the top bar by adding a dropdown field. Imagine a vibrant red rectangle at the top of the screen; that's where I envision the dropdown menu being placed.

Has anyone done something similar or could guide me on how to achieve this? Any examples or code snippets would be greatly appreciated!

Thanks a ton!

Solution

This is how I achieved it in one of my projects with two simple steps:

1. I created a Livewire component with a Filament form:

<?php

namespace App\Livewire;

use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Illuminate\Contracts\View\View;
use Filament\Forms\Form;
use Filament\Forms;
use Livewire\Component;

class ExampleSelector extends Component implements HasForms
{
    use InteractsWithForms;

    public ?array $data = [];

    public function mount(): void
    {
        $this->form->fill();
    }

    public function render(): View
    {
        return view('livewire.example-selector');
    }

    public function form(Form $form): Form
    {
        return $form->statePath('data')->schema([
            Forms\Components\Select::make('example')
                ->hiddenLabel()
                ->live()
                ->afterStateUpdated(function (string $state): void {
                    dd($state);
                })
                ->options([
                    'option1' => 'Option 1',
                    'option2' => 'Option 2',
                ]),
        ]);
    }
}

<div>
    {{ $this->form }}
</div>

2. I modified the app/Providers/Filament/AdminPanelProvider.php and I added a render hook:

public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->renderHook(
            \Filament\View\PanelsRenderHook::USER_MENU_BEFORE,
            fn (): string => \Illuminate\Support\Facades\Blade::render('@livewire(\App\Livewire\ExampleSelector::class)'),
        )
        // ...

Notes:

I'm hidding the label (->hiddenLabel()), otherwise it breaks the nav height.
As the form doesn't have a submit button, you have to make sure that you listen for the select change by using ->live() and ->afterStateUpdated() methods.
You can play with the placing of the Livewire component by checking out the \Filament\View\PanelsRenderHook. There, you'll find all the available places where you can put it.

Docs: