Cluster navigation filament

Level 58

Certainly! In Filament, to customize the navigation view (like changing the background of the navigation for a specific Cluster), you typically need to publish and customize the navigation Blade view, or apply custom CSS targeting the navigation area.

Here's how you can approach this:

1. Publish Filament's Blade views (optional)

If you want complete control, you can publish Filament's views:

php artisan vendor:publish --tag=filament-views

This will copy Filament's views to resources/views/vendor/filament/. You can then edit the navigation component view, usually at resources/views/vendor/filament/components/layouts/navigation.blade.php.

2. Add Custom CSS

If you just want to change the background color, a simple approach is to add custom CSS through Filament's panel configuration.

a. Add your custom CSS file

Create a CSS file, e.g. resources/css/filament-custom.css:

/* Change background of navigation sidebar */
.filament-sidebar {
    background-color: #1a1a2e !important; /* Replace with your color */
}

b. Reference this CSS in your panel

In your PanelProvider (often in app/Providers/Filament/AdminPanelProvider.php):

public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->styles([
            asset('css/filament-custom.css'),
        ]);
}

3. Target Specific Clusters (Filament v3 Feature)

If you are using Clusters, and you want to target only a specific cluster’s navigation, you can use a custom CSS class on that cluster’s navigation:

In your Cluster class:

public static function navigation(): array
{
    return [
        // ...
    ];
}

public static function getNavigationGroup(): ?string
{
    // Return a unique class or attribute for targeting, or style via identifier
    return 'my-cluster-navigation';
}

Or, simply target by inspecting the HTML and writing CSS that applies to only your desired cluster, for example:

/* Example: Target navigation with a specific data attribute or class */
.filament-sidebar[data-cluster="your-cluster-slug"] {
    background-color: #123456;
}

You may need to inspect the rendered HTML to find the precise selector for your specific Filament version and setup.

Summary

Quick edit: Add custom CSS to override the navigation background.
Full control: Publish and edit the Blade navigation view directly.
For clusters: Use custom CSS targeting the cluster specifically.

Let me know if you need a code sample for a particular Filament version or setup!