A quick customization to laravel filament navbar

Why

I know this is not necessary to write about changing filament navbar but sometimes it’s hard to find where or how i customize it. I have been using filament for a while now and I really like it. It is a great package for creating admin panel in laravel. I have been using it for my personal projects. I have also written a blog post about how to create “custom login page” in filament. So today I am going to write about how to customize filament navbar.

Publish views

First of all, we need to publish filament views. To publish filament views run this command in your terminal.

php artisan vendor:publish --tag=filament-views

Layout

After publishing filament views you will see a new folder in your resources/views. We will be working in layouts folder.

For reference, below is the folder structure.

views
└── vendor
    └── filament
        └── layouts
            ├── app.blade.php
            └── app
                └──topbar
                    └── user-menu.blade.php

Customization

Now Lets start with layouts/app.blade.php. This is the main layout file for filament. To customize the navbar head over to header tag, there you will see custom components like <x-filament::layouts.app.topbar.user-menu />. This is the component for user menu. You can customize it as you want.

// top left navbar items of default filament navbar
<div class="flex items-center justify-between flex-1 gap-4">
    <x-filament::layouts.app.topbar.breadcrumbs :breadcrumbs="$breadcrumbs" />

    @livewire('filament.core.global-search')

    <x-filament::layouts.app.topbar.user-menu />
</div>

Example

Lets create a dark mode toggle button in navbar. There are two files we are going to change. First is layouts/app.blade.php and second is layouts/app/topbar/user-menu.blade.php. Filament comes with built-in support for dark theme. Lets start with enabling dark mode config for filament. Change config/filament.php file and set 'dark_mode' => true, in array.

Add this code in layouts/app.blade.php file. after @livewire('filament.core.global-search') line. And you will see a toggle button in navbar. On click it fire a event called dark-mode-toggled and toggle theme.

// below code is similar to user-menu.blade.php 
// file dark mode implementation
<div>
    @if (config('filament.dark_mode'))
    <div
        x-data="{ 
            mode: null,

            theme: null,

            init: function () {
                this.theme = localStorage.getItem('theme') || (this.isSystemDark() ? 'dark' : 'light')
                this.mode = localStorage.getItem('theme') ? 'manual' : 'auto'

                window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => {
                    if (this.mode === 'manual') return

                    if (event.matches && (! document.documentElement.classList.contains('dark'))) {
                        this.theme = 'dark'

                        document.documentElement.classList.add('dark')
                    } else if ((! event.matches) && document.documentElement.classList.contains('dark')) {
                        this.theme = 'light'

                        document.documentElement.classList.remove('dark')
                    }
                })

                $watch('theme', () => {
                    if (this.mode === 'auto') return

                    localStorage.setItem('theme', this.theme)

                    if (this.theme === 'dark' && (! document.documentElement.classList.contains('dark'))) {
                        document.documentElement.classList.add('dark')
                    } else if (this.theme === 'light' && document.documentElement.classList.contains('dark')) {
                        document.documentElement.classList.remove('dark')
                    }

                    $dispatch('dark-mode-toggled', this.theme) // dispatch event
                })
            },

            isSystemDark: function () {
                return window.matchMedia('(prefers-color-scheme: dark)').matches
            },
        }"
        x-on:dark-mode-toggled.window="mode = $event.detail"
    >
        <span x-show="theme === 'light'">
            <x-filament::icon-button icon="heroicon-s-moon" x-on:click="mode = 'manual'; theme = 'dark'" />
        </span> 

        <span x-show="theme === 'dark'">
            <x-filament::icon-button icon="heroicon-s-sun" x-on:click="mode = 'manual'; theme = 'light'" />
        </span>
    </div>
    @endif
</div>

Moving to layouts/app/topbar/user-menu.blade.php. Since we have added theme toggler outside of user menu. We need to remove it from user-menu.blade.php. Just remove the below code form that file.

<div>
    @if (config('filament.dark_mode'))
        <x-filament::dropdown.item icon="heroicon-s-moon" x-show="theme === 'dark'" x-on:click="mode = 'manual'; theme = 'light'">
            {{ __('filament::layout.buttons.light_mode.label') }}
        </x-filament::dropdown.item>

        <x-filament::dropdown.item icon="heroicon-s-sun" x-show="theme === 'light'" x-on:click="mode = 'manual'; theme = 'dark'">
            {{ __('filament::layout.buttons.dark_mode.label') }}
        </x-filament::dropdown.item>
    @endif
</div>