
Add a Language Switcher Under The User Menu
- Published: 22 Apr 2024 Updated: 04 May 2024
Integrate Language Switcher in User Menu for a Cleaner Top Bar

Register a Render Hook:
Begin by registering a new render hook to your panel provider. We'll place the switcher in the USER_MENU_PROFILE_AFTER
position to keep the top bar clean, but you can register it any position you want.
1->renderHook(
2 PanelsRenderHook::USER_MENU_PROFILE_AFTER,
3 fn (): View => view('filament.hooks.lang-switcher'),
4)
Use the Dropdown Component
We will use the the dropdown component from Filament to render the sub-navigation for the language switcher. Customize the UI as needed, such as adding flags for different languages.
in your filament.hooks.lang-switcher
file:
1<div>
2 <x-filament::dropdown
3 maxHeight="250px"
4 placement="left-start"
5 teleport="true"
6 >
7 <x-slot name="trigger">
8 <div class="p-2 flex items-center justify-start gap-2">
9 <x-filament::icon
10 icon="heroicon-c-chevron-left"
11 class="mx-1 h-5 w-5 text-gray-500 dark:text-gray-400"
12 />
13 Select Language
14 </div>
15 </x-slot>
16
17 <x-filament::dropdown.header
18 class="font-semibold"
19 color="gray"
20 icon="heroicon-c--language"
21 >
22 Select Language
23 </x-filament::dropdown.header>
24
25 <x-filament::dropdown.list>
26 <x-filament::dropdown.list.item
27 :color="(app()->getLocale() === 'en') ? 'primary' : null"
28 icon="heroicon-m-chevron-right"
29 :href="url('lang/en')"
30 tag="a"
31 >
32 English
33 </x-filament::dropdown.list.item>
34
35 <x-filament::dropdown.list.item
36 :color="(app()->getLocale() === 'es') ? 'primary' : null"
37 icon="heroicon-m-chevron-right"
38 :href="url('lang/es')"
39 tag="a"
40 >
41 Español
42 </x-filament::dropdown.list.item>
43 </x-filament::dropdown.list>
44 </x-filament::dropdown>
45</div>
Implement the Switcher
Create a simple route to capture the selected language and store it in the session:
1Route::get('lang/{lang}', function ($lang) {
2 session()->put('current_lang', $lang);
3
4 return redirect(url()->previousPath());
5});
Set Up a Middleware
Define a middleware to instruct Laravel to pick the locale from the session:
1class SetLang
2{
3 public function handle(Request $request, Closure $next): Response
4 {
5 return app(StartSession::class)
6 ->handle($request, function ($request) use ($next) {
7 if (! session()->has('current_lang')) {
8 session()->put('current_lang', 'en');
9 }
10
11 app()->setLocale(session('current_lang', 'en'));
12
13 return $next($request);
14 });
15 }
16}
Register the Middleware
Finally, register the middleware within the Filament panel provider:
1->middleware([
2 //...
3 SetLang::class,
4])

Related Tricks:
Let Users to Select All Options with a Simple Hint Action
provide a loading indicator for long running operations
add any link or actions to the topbar
add locale parameter to all of your filament panel