Enhance the user experience with sub-navigation menus.

Integrating the Language Selector into the User Menu for a Filament Top Bar in PHP

Add a Language Selector Below the User Menu

Register a new render hook: Start by registering a new render hook in your panel provider. We will place the selector at the position USER_MENU_PROFILE_AFTER to keep the top bar clean, but you can register it at any other position you prefer.

->renderHook(
    PanelsRenderHook::USER_MENU_PROFILE_AFTER,
    fn (): View => view('filament.hooks.lang-switcher'),
)

Use the Dropdown Component

We will use Filament's dropdown component to render the sub-navigation of the language selector. Customize the interface as needed, such as adding flags for different languages.

Read also

Easily import large Excel files with Filament.

How to Set Default Sorting in Filament Tables

In your filament.hooks.lang-switcher file:

<div>
    <x-filament::dropdown
            maxHeight="250px"
            placement="left-start"
            teleport="true"
    >
        <x-slot name="trigger">
            <div class="p-2 flex items-center justify-start gap-2">
                <x-filament::icon
                    icon="heroicon-o-chevron-left"
                    class="mx-1 h-5 w-5 text-gray-500 dark:text-gray-400"
                />
                Select Language
            </div>
        </x-slot>
 
        <x-filament::dropdown.header
            class="font-semibold"
            color="gray"
            icon="heroicon-o-language"
        >
            Select Language
        </x-filament::dropdown.header>
 
        <x-filament::dropdown.list>
            <x-filament::dropdown.list.item
                :color="(app()->getLocale() === 'en') ? 'primary' : null"
                icon="heroicon-o-chevron-right"
                :href="url('lang/en')"
                tag="a"
            >
                English
            </x-filament::dropdown.list.item>
 
            <x-filament::dropdown.list.item
                    :color="(app()->getLocale() === 'es') ? 'primary' : null"
                    icon="heroicon-o-chevron-right"
                    :href="url('lang/es')"
                    tag="a"
            >
                Spanish
            </x-filament::dropdown.list.item>
        </x-filament::dropdown.list>
    </x-filament::dropdown>
</div>

Implement the Language Selector

Create a simple route to capture the selected language and store it in the session:

Route::get('lang/{lang}', function ($lang) {
    session()->put('current_lang', $lang);

    return redirect(url()->previousPath());
});

Set Up a Middleware

Define a middleware to tell Laravel to take the language from the session:

Read also

Create a tooltip macro easily in Filament PHP.

Setting Up Filament PHP for Production

class SetLang
{
    public function handle(Request $request, Closure $next): Response
    {
        return app(StartSession::class)
                ->handle($request, function ($request) use ($next) {
                if (! session()->has('current_lang')) {
                    session()->put('current_lang', 'en');
                }

                app()->setLocale(session('current_lang', 'en'));

                return $next($request);
        });
    }
}

Register the Middleware 

Finally, register the middleware within the Filament panel provider:

->middleware([
        //...
        SetLang::class,
])