How to re-use the notification side panel

Mar 3, 2023
Lance Armah-Abraham
Admin panel

The notification panel in Filament allows one to view notifications by clicking on the notification button. In this trick, I teach how to re-use that panel in other places of your application where you want to display some custom information in a similar panel.

I use a similar strategy in the package filament-page-hints to display the page hints in a sliding panel.

The notification panel is basically a modal but just styled differently so if you can think of how to trigger a modal manually (as described in this trick) from your filament views it's similar if not the same.

<x-filament::modal id="my-modal" close-button slide-over width="md">
<x-slot name="header">
<x-filament::modal.heading class="relative">
<span>My Slide Over Panel</span>
<div class="mt-[calc(-1rem-1px)]">
<div @class([
'-mx-6 border-b border-t',
'dark:border-gray-700' => config('notifications.dark_mode'),
'dark:border-gray-800' => config('notifications.dark_mode'),
<div @class([
'py-2 pl-4 pr-2 -mb-px space-y-2',
'dark:bg-gray-700' => config('notifications.dark_mode'),
<p> This is my custom modal content </p>

To now trigger the modal, we can then use a simple button click

<button x-data="{}" x-on:click="$dispatch('open-modal', { id: 'my-modal' })">
Open Modal

On the trigger, the x-data="{}" property is required if you use a normal HTML button but if you were to use the filament component button, <x-filament::button x-on:click="$dispatch('open-modal', { id: 'my-modal' })">Open Modal</x-filament::button>, you won't need to add that property.

Slideover showcase

No comments yet…