Customize the topbar
Hi everyone,
I’m using Filament v4 and I want to customize the topbar with:
1. A single button to toggle Dark Mode / Light Mode.
2. An icon button (Home) that links to the homepage.
I’ve seen examples using NavigationItem::make() for sidebar items, but I’m not sure how to properly add these directly in the topbar.
Specifically:
How can I implement a dark/light mode toggle in the topbar?
How do I add a home icon button next to it?
Can I use Heroicons or custom icons for these buttons?
Example code or guidance would be very helpful!
10x in advance
I’m using Filament v4 and I want to customize the topbar with:
1. A single button to toggle Dark Mode / Light Mode.
2. An icon button (Home) that links to the homepage.
I’ve seen examples using NavigationItem::make() for sidebar items, but I’m not sure how to properly add these directly in the topbar.
Specifically:
How can I implement a dark/light mode toggle in the topbar?
How do I add a home icon button next to it?
Can I use Heroicons or custom icons for these buttons?
Example code or guidance would be very helpful!
10x in advance
Solution
1. You could hide the current solution in the user menu via CSS and add a new one via a render hook
2. Should be easily doable via a render hook.
2. Should be easily doable via a render hook.
