Filament Sidebar Menu Search
Hey everyone! 👋
Has anyone needed to customize Filament's sidebar menus to add a search field for navigating through many menu items? Something like this:
[insert the SVG mockup]
I have lots of menu items in my ERP and I'm looking for a way to make navigation easier. 🤔
Let me know if anyone has implemented something similar! Thanks! 🙂
12 Replies
Nope. You could do this though by adding a quick search and loading the menu items exactly as the navigation menu builds them and filter by search and on click redirect to X
Look at simple Livewire components with a search input?
I’ve been doing some research, and it seems that if I want to add this search field above the menus, I’d have to create a plugin. I’ll see if I can put one together. Thanks for the suggestion!
Noo...
Solution
Just render the blade with the render hook
"Oh right, I had forgotten about render hooks - you just saved me a lot of time! Thanks so much"
I did a test here, and it apparently worked, I'm terrible at layout harmony lol, but I think this could work, I'll continue some tests here, thank you very much for now
Just adding an addendum, lol, my initial idea was that when I searched in this field, the filament's own menus would be filtered. In this case, I'll only be able to overlay an item on top of the menu, so I can modify the filament's SIDEBAR_NAV. Would that really only be possible with plugins?
So to do what you want, you'll need to dig deep in with some JS or use alpine and override the filament menu and use data attributes to filter the items.
Cool, I'll try to do it, I wonder if version 4, did they think about doing this?
@Mauricio G I know it's not the same as you want but have you considered a Spotlight plugin so people could find menus without actually looking at them?
https://filamentphp.com/plugins/pxlrbt-spotlight
Paid version is even better: https://filamentphp.com/plugins/pxlrbt-spotlight-pro
Watch the demo video here: https://filament.pxlrbt.de/spotlight-pro/
P.S. I'm not affiliated, just genuinely think it's a great work by @Dennis Koch 🙂
Filament
Spotlight by Dennis Koch - Filament
Quickly navigate your Filament Resources with Spotlight functionality.
Filament
Spotlight Pro by Dennis Koch - Filament
Browse your Filament Panel with ease. Filament Spotlight Pro adds a Spotlight/Raycast like Command Palette to your Filament Panel.
Filament Spotlight Pro
Browse your Filament Panel with ease.
This is perfect, it will save me a lot of time, this discord community is really cool, thank you Povilas Korop, I just subscribed to your channel hehehe
Thanks for mentioning.