README

About Solution Forest

Solution Forest Web development agency based in Hong Kong. We help customers to solve their problems. We Love Open Soruces.

We have built a collection of best-in-class products:

InspireCMS: A full-featured Laravel CMS with everything you need out of the box. Build smarter, ship faster with our complete content management solution.
Filaletter: Filaletter - Filament Newsletter Plugin
Website CMS Management: A hands-on Filament CMS plugin for those who prefer more manual control over their website content management.

Filament Header Select

A modern header navigation component for Filament Admin with global rounded styling and proper color system.

✨ Features

✅ Global Rounded Styling - Apply consistent rounded corners to all navigation elements
✅ Filament Color System - Uses native Filament colors (primary, gray, info, success, warning, danger)
✅ URL Navigation - Direct links to pages
✅ Dropdown Selects - Interactive dropdowns with onChange callbacks
✅ Dynamic Options - Refresh dropdown options from database
✅ No Selection Highlighting - Clean UI without persistent highlighting
✅ Responsive Design - Desktop-optimized, mobile-hidden

Installation

composer require solution-forest/filament-header-select

Quick Start

use SolutionForest\FilamentHeaderSelect\HeaderSelectPlugin;
use SolutionForest\FilamentHeaderSelect\Components\HeaderSelect;

public function panel(Panel $panel): Panel
{
    return $panel
        ->plugins([
            HeaderSelectPlugin::make()
                ->rounded('rounded-lg') // Global rounded corners
                ->selects([
                    // URL Link
                    HeaderSelect::make('admin')
                        ->label('Admin')
                        ->url(fn() => route('filament.admin.pages.dashboard'))
                        ->color('primary'),
                        
                    // Dropdown with Navigation
                    HeaderSelect::make('agent_config')
                        ->label('Agent Config')
                        ->options([
                            'my_agent_1' => 'My Agent 2025-08-29 16:24',
                            'my_agent_2' => 'My Agent 2025-08-29 16:20',
                            'new_agent' => '+ New AI Agent',
                        ])
                        ->icon('heroicon-o-cog-6-tooth')
                        ->color('info')
                        ->keepOriginalLabel(true)
                        ->refreshable(true)
                        ->onChange(function ($value) {
                            return match($value) {
                                'my_agent_1' => '/admin/agents/my-agent-1',
                                'my_agent_2' => '/admin/agents/my-agent-2',
                                'new_agent' => '/admin/agents/create',
                                default => null,
                            };
                        }),
                ])
        ]);
}

Configuration

Global Rounded Corners

HeaderSelectPlugin::make()
    ->rounded('rounded-lg')      // Large rounded corners
    ->rounded('rounded-full')    // Pill-like styling

Colors

HeaderSelect::make('item')
    ->color('primary')    // Indigo blue
    ->color('gray')       // Neutral gray
    ->color('info')       // Blue
    ->color('success')    // Green
    ->color('warning')    // Amber
    ->color('danger')     // Red

Methods

Method	Description	Example
`label(string $label)`	Set display label	`->label('Admin')`
`url(string\|Closure $url)`	Set navigation URL	`->url('/admin')`
`options(array\|Closure $options)`	Set dropdown options	`->options(['key' => 'Label'])`
`color(string $color)`	Set color theme	`->color('primary')`
`icon(string $icon)`	Set Heroicon	`->icon('heroicon-o-home')`
`keepOriginalLabel(bool $keep)`	Keep original label	`->keepOriginalLabel(true)`
`refreshable(bool $refreshable)`	Add refresh button	`->refreshable(true)`
`onChange(Closure $callback)`	Handle selection changes	`->onChange(fn($value) => route('page', $value))`

Examples

URL Navigation

HeaderSelect::make('dashboard')
    ->label('Dashboard')
    ->url(fn() => route('filament.admin.pages.dashboard'))
    ->icon('heroicon-o-home')
    ->color('primary')

Dropdown with Redirect

HeaderSelect::make('categories')
    ->label('Categories')
    ->options([
        'electronics' => 'Electronics',
        'clothing' => 'Clothing',
        'books' => 'Books',
    ])
    ->icon('heroicon-o-squares-2x2')
    ->color('success')
    ->onChange(function ($value) {
        return "/admin/categories/{$value}";
    })

Dynamic Options from Database

HeaderSelect::make('agents')
    ->label('AI Agents')
    ->options(fn() => Agent::pluck('name', 'id'))
    ->refreshable(true)
    ->color('info')
    ->onChange(function ($value) {
        return "/admin/agents/{$value}";
    })

Troubleshooting

Rounded corners not working?

Use global ->rounded() on HeaderSelectPlugin
Clear cache: php artisan view:clear

Wrong colors showing?

Use proper color names: primary, gray, info, success, warning, danger
Clear cache: php artisan config:clear

onChange redirects not working?

Return URL string from onChange callback
Use return '/admin/page' instead of redirect()->to('/admin/page')

License

MIT License. See LICENSE.md for details.

Credits

Solution Forest - Package development
Filament - Laravel admin framework

solution-forest / filament-header-select

Maintainers

Details