A quick customization to laravel filament navbar
Tags: laravel, filamentphp
Published: 2023-02-14 16:11:52

---
title: A quick customization to laravel filament navbar
published: true
date: 2022-10-31 00:00:00 UTC
tags: [laravel, filamentphp]
canonical_url: https://www.codef.site/blog/laravel/a-quick-customization-to-laravel-filament-navbar/

---
!["Laravel filament dashboard"](https://www.codef.site/img/laravel/filament-navbar.png)
## 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”](/blog/laravel/how-to-customize-laravel-filament-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>
```