Using Filament modals without an associated action

I was recently working on a project with a Filament admin panel and Livewire front-end and I wanted to add a slide out menu for the mobile view of the front-end toggled by a hamburger menu button. In Filament a slide-out menu is straight forward to add using an Action modal:

Action::make('modal-name')
    ->modalHeading('Modal Heading')
    ->slideOver();

However, if you there's no data that needs to be sent to or from the server side, as in my menu example, it's overkill to have the code above in a Livewire class and then render it in a separate view. Furthermore, since it's a menu, I needed this slide out to be available on all pages. If you already have filament available on the front-end, though, you can add a modal slide-over to a blade component like so:

<x-filament::modal id="side-menu" content-view-class="z-60" slide-over>
    <x-slot name="header" class="border-b border-default">
        <h2 class="fi-modal-heading">Menu</h2>
    </x-slot>
    <div>
        // Your Slide Over content here
    </div>
</x-filament::modal>

<x-filament-actions::modals />

The slide-over attribute transforms the component from a pop-up modal to a slide over. The content-view-class attribute is optional, but is a good way to add CSS classes to the visible container of the modal/slide-over. In this example I've used it to specify the z-index with a TailwindCSS class to ensure it appears above other content on the page. Finally, we need to add x-filament:modals/ in the menu or in the main layout page to inject the HTML necessary to display modals in all the pages where this menu will appear. In order to trigger the slide-over, we can use a simple Alpine.js directive on the element that should trigger the slide-over:

<button
    type="button"
    x-on:click="$dispatch('open-modal',  { id: 'side-menu' })"
>
    Menu
</button>

That's it. I'm positive there are more Filament components that can be used blade-only in this way, but I just wanted to share this one in case someone has a similar use case.