F
Filamentβ€’3mo ago
Mauricio G

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! πŸ™‚
No description
Solution:
Just render the blade with the render hook
Jump to solution
12 Replies
toeknee
toekneeβ€’3mo ago
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?
Mauricio G
Mauricio GOPβ€’3mo ago
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!
toeknee
toekneeβ€’3mo ago
Noo...
Solution
toeknee
toekneeβ€’3mo ago
Just render the blade with the render hook
Mauricio G
Mauricio GOPβ€’3mo ago
"Oh right, I had forgotten about render hooks - you just saved me a lot of time! Thanks so much"
Mauricio G
Mauricio GOPβ€’3mo ago
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
No description
Mauricio G
Mauricio GOPβ€’3mo ago
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?
toeknee
toekneeβ€’3mo ago
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.
Mauricio G
Mauricio GOPβ€’3mo ago
Cool, I'll try to do it, I wonder if version 4, did they think about doing this?
Povilas K
Povilas Kβ€’3mo ago
@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.
Mauricio G
Mauricio GOPβ€’3mo ago
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
Dennis Koch
Dennis Kochβ€’3mo ago
Thanks for mentioning.

Did you find this page helpful?