How to more finely control placement of items in top bar
I'm using Render hooks to place a dropdown menu in the top bar which works fine, but it seems like I can either have it be at the far left, which I don't love, or I can have it be at the far right after the user menu, which I also don't like. Ideally I'd like to have everything at the right hand side, first the dropdown, then the notifications bell icon, and then the user menu. Is there a way to control this?
Solution:Jump to solution
You said you didn't like it after
topbar.end, but if you look at the component template where that's triggered, you'll see that the global-search.before and .after are triggered slightly before that. Why not hook in there?
https://github.com/filamentphp/filament/blob/1d5bec4b8dce8d0f4e289a929612d65d04a8673b/packages/panels/resources/views/components/topbar/index.blade.php#L122-L139...GitHub
filament/packages/panels/resources/views/components/topbar/index.bl...
A collection of beautiful full-stack components for Laravel. The perfect starting point for your next app. Using Livewire, Alpine.js and Tailwind CSS. - filamentphp/filament
5 Replies
Which render hooks?
panels::topbar.start/end, or panels::global-search.before/after ?
Is this the template you're inserting into? Is there any CSS-repositioning that could be used for your element? https://github.com/filamentphp/filament/blob/3.x/packages/panels/resources/views/components/topbar/index.blade.php
Wild idea: could you hook into the Top Bar Navigation class and insert your element into the list of nav objects?GitHub
filament/packages/panels/resources/views/components/topbar/index.bl...
A collection of beautiful full-stack components for Laravel. The perfect starting point for your next app. Using Livewire, Alpine.js and Tailwind CSS. - filamentphp/filament
I'm hooking in at
panels::topbar.start currently. panels::topbar.end puts the menu after the user menu, which looks a little odd to me, mainly because Im used to seeing the user menu be the last one in most websites. It looks to be getting inserted into the blade file you referenced. I've tried playing with the css a bit in dev tools and couldn't get it to act right, but I'm no css expert by any stretch.This new RenderHook added in v3.0.73 probably isn't what you're looking for, but it could be inspiration to contribute your own PR to insert another renderhook before the User menu, if you feel that it's something that should be built-in: https://github.com/filamentphp/filament/pull/8929/files
GitHub
Register page.header render hook by mohamedsabil83 · Pull Request #...
This PR adds a new render hook between the title and actions in the page header.
A use case example is adding simple filter tabs in the same line with the title and actions instead of taking an ext...
thanks for that, I'll maybe try and mimick that..
Solution
You said you didn't like it after
topbar.end, but if you look at the component template where that's triggered, you'll see that the global-search.before and .after are triggered slightly before that. Why not hook in there?
https://github.com/filamentphp/filament/blob/1d5bec4b8dce8d0f4e289a929612d65d04a8673b/packages/panels/resources/views/components/topbar/index.blade.php#L122-L139GitHub
filament/packages/panels/resources/views/components/topbar/index.bl...
A collection of beautiful full-stack components for Laravel. The perfect starting point for your next app. Using Livewire, Alpine.js and Tailwind CSS. - filamentphp/filament