KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#developer-tools #typescript #codex #ai-agents #claude-code #dsh #dsh-plugin #cli #macos #ai-agent #deepseek-harness #open-source

filament-header-select

★ 24 Open GitHub ↗

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

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

## About Solution Forest

[Solution Forest](https://solutionforest.com) Web development agency based in Hong Kong. We help customers to solve their problems. We Love Open Sources.

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

- [InspireCMS](https://inspirecms.net): A full-featured Laravel CMS with everything you need out of the box. Build smarter, ship faster with our complete content management solution.
- [Filaletter](https://filaletter.solutionforest.net): Filaletter - Filament Newsletter Plugin
- [Website CMS Management](https://filamentphp.com/plugins/solution-forest-cms-website): 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

```bash
composer require solution-forest/filament-header-select
```

## Quick Start

```php
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
```php
HeaderSelectPlugin::make()
    ->rounded('rounded-lg')      // Large rounded corners
    ->rounded('rounded-full')    // Pill-like styling
```

### Colors
```php
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
```php
HeaderSelect::make('dashboard')
    ->label('Dashboard')
    ->url(fn() => route('filament.admin.pages.dashboard'))
    ->icon('heroicon-o-home')
    ->color('primary')
```

### Dropdown with Redirect
```php
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
```php
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](LICENSE.md) for details.

## Credits

- **[Solution Forest](https://github.com/solution-forest)** - Package development
- **[Filament](https://filamentphp.com)** - Laravel admin framework

filament-header-select

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README