Page header in topbar
I want to move the page header (the one with breadcrumbs, title and actions) in the topbar.
I managed to extend some fiels (layout, topbar etc) in order to add the header but I can't seem to make the actions work.
Is this the way to do this. Is there another way i can accomplish this?
9 Replies
There was some chatter about this here: https://discord.com/channels/883083792112300104/883084832387760148/1288922950107398257
There's a few messages further up too
It might at least point you in the right direction
Theres a new plugin https://github.com/diogogpinto/filament-page-context
GitHub
GitHub - diogogpinto/filament-page-context: A Filament plugin that ...
A Filament plugin that automatically injects current request breadcrumbs and page title into the filament() method, enhancing page context and navigation for Filament admin panels. - diogogpinto/fi...
That is a great plugin but unfortunately does not help me so much.
The idea is to use the empty space from the topbar and inject the page header. Breadcrumbs, tile and actions.
The only thing missing is how can I add actions in the topbar
So that will do the breadcrumbs and title? But you can modfiy it and add in your own actions?
I managed to move the page header into topbar.
Here's how I did this:
1. Create a custom layout based on
vendor/filament/filament/resources/views/components/layout/index.blade.php
Modify it so that it uses a custom sidebar and custom topbar
topbar is copied from vendor/filament/filament/resources/views/components/topbar/index.blade.php
sidebar is copied from vendor/filament/filament/resources/views/components/sidebar/index.blade.php
2. In topbar I removed the sections about tenancy and navigation since I won't use them and added an empty <div id="here-is-where-i-need-page-header" />
I also increased the height of the topbar.
3. In sidebar i just increased the height so it matches the topbar
4. Create custom header from vendor/filament/filament/resources/views/components/header/index.blade.php
Added @teleport('#here-is-where-i-need-page-header'). This id should match the one from point 2.
5. Create custom page from vendor/filament/filament/resources/views/components/page/index.blade.php
In my custom page i replaced the <x-filament-panels::header /> with my custom one <x-filament.header />
Here is how to use the new components.
In the custom page that you create, you should have the following:
The page view should use your custom page instead of <x-filament-panels::page /> created on point 5.
Now the page header should appear in the topbar.
Let me know what you think about this approach!what you did here is really bad practice. every filament update could brake something or some features just won't work. especially when v4 will get released if this application will get upgraded it will be such a headache
by the actions, you mean actions to create, delete record right? can you also show how it looks now?
This is how it looks.
What would be the good practice to achieve the same thing ?
What's that below breadcrumb?
custom heading