如何在Laravel Filament顶部栏添加下拉菜单元素？

1. 创建自定义顶部导航组件 #

先通过Artisan命令生成一个Filament组件：

php artisan make:filament-component TopBarDropdown

2. 编写组件核心逻辑 #

打开生成的app/Filament/Components/TopBarDropdown.php，替换为以下代码：

<?php

namespace App\Filament\Components;

use Filament\Support\Components\Component as SupportComponent;
use Illuminate\Contracts\View\View;

class TopBarDropdown extends SupportComponent
{
    protected string $view = 'filament.components.top-bar-dropdown';

    public static function make(): static
    {
        return app(static::class);
    }

    protected array $items = [];

    public function items(array $items): static
    {
        $this->items = $items;
        return $this;
    }

    public function getItems(): array
    {
        return $this->items;
    }
}

3. 创建组件视图文件 #

在resources/views/filament/components目录下新建top-bar-dropdown.blade.php，加入带交互逻辑的下拉菜单代码：

<div class="relative" x-data="{ open: false }">
    <button @click="open = !open" class="fi-nav-item group flex items-center gap-2 rounded-md px-3 py-2 text-sm font-semibold text-gray-900 transition-colors hover:bg-gray-100 dark:text-white dark:hover:bg-gray-800">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
        </svg>
        <span>自定义菜单</span>
    </button>

    <div x-show="open" @click.away="open = false" class="fi-dropdown-panel absolute right-0 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-gray-900/5 dark:bg-gray-900 dark:ring-white/10">
        <div class="fi-dropdown-content py-1">
            @foreach($getItems() as $item)
                <a href="{{ $item['url'] }}" class="fi-dropdown-item flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-800">
                    {{ $item['label'] }}
                </a>
            @endforeach
        </div>
    </div>
</div>

4. 在Filament面板注册组件 #

打开你的面板配置文件（比如app/Filament/AdminPanelProvider.php），在navigation()方法中添加自定义组件：

use App\Filament\Components\TopBarDropdown;

public function panel(Panel $panel): Panel
{
    return $panel
        // 保留原有配置...
        ->navigation(function (Navigation $navigation) {
            $navigation->items([
                // 保留原有导航项...
                TopBarDropdown::make()->items([
                    ['label' => '系统设置', 'url' => '/admin/settings'],
                    ['label' => '帮助中心', 'url' => '/admin/help'],
                    ['label' => '退出登录', 'url' => route('filament.admin.auth.logout')],
                ]),
            ]);
        });
}

版本兼容与扩展提示 #

• 上述代码适配Filament v3，若使用v2版本，需将组件继承类改为Filament\Navigation\NavigationItem
• 可根据用户权限动态生成菜单项，比如在getItems()方法中添加权限判断逻辑
• 如需添加图标，可在菜单项数组中加入icon字段，在视图中渲染对应SVG

内容的提问来源于stack exchange，提问作者Roy