# 增加自定義選單 ###### tags: `laravel` `filament v3.2` 在 Filament V3.2 加入自定義選單是很簡單的 navigationGroups => 選單組 navigationItems => 選單項目 記住 定義 navigationGroups 一定要有 item 若沒有不會顯示 1. 定義 navigationGroups ``` <?php namespace App\Providers\Filament; use Filament\Facades\Filament; use Filament\Http\Middleware\Authenticate; use Filament\Http\Middleware\DisableBladeIconComponents; use Filament\Http\Middleware\DispatchServingFilamentEvent; use Filament\Navigation\NavigationGroup; use Filament\Navigation\NavigationItem; use Filament\Pages; use Filament\Panel; use Filament\PanelProvider; use Filament\Support\Colors\Color; use Filament\Widgets; use Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse; use Illuminate\Cookie\Middleware\EncryptCookies; use Illuminate\Foundation\Http\Middleware\VerifyCsrfToken; use Illuminate\Routing\Middleware\SubstituteBindings; use Illuminate\Session\Middleware\AuthenticateSession; use Illuminate\Session\Middleware\StartSession; use Illuminate\View\Middleware\ShareErrorsFromSession; class AdminPanelProvider extends PanelProvider { public function panel(Panel $panel): Panel { return $panel ->id('admin') ->path('admin') // 組 ->navigationGroups([ NavigationGroup::make() ->label('Shop') ->icon('heroicon-o-shopping-cart'), NavigationGroup::make() ->label('Blog') ->icon('heroicon-o-pencil'), NavigationGroup::make() ->label('Settings') ->icon('heroicon-o-cog-6-tooth') ->collapsed(), ]) } } ``` 2. 定義 navigationItems ``` <?php namespace App\Providers\Filament; use Filament\Facades\Filament; use Filament\Http\Middleware\Authenticate; use Filament\Http\Middleware\DisableBladeIconComponents; use Filament\Http\Middleware\DispatchServingFilamentEvent; use Filament\Navigation\NavigationGroup; use Filament\Navigation\NavigationItem; use Filament\Pages; use Filament\Panel; use Filament\PanelProvider; use Filament\Support\Colors\Color; use Filament\Widgets; use Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse; use Illuminate\Cookie\Middleware\EncryptCookies; use Illuminate\Foundation\Http\Middleware\VerifyCsrfToken; use Illuminate\Routing\Middleware\SubstituteBindings; use Illuminate\Session\Middleware\AuthenticateSession; use Illuminate\Session\Middleware\StartSession; use Illuminate\View\Middleware\ShareErrorsFromSession; class AdminPanelProvider extends PanelProvider { public function panel(Panel $panel): Panel { return $panel ->id('admin') ->path('admin') // 組 ->navigationGroups([ NavigationGroup::make() ->label('Shop') ->icon('heroicon-o-shopping-cart'), NavigationGroup::make() ->label('Blog') ->icon('heroicon-o-pencil'), NavigationGroup::make() ->label('Settings') ->icon('heroicon-o-cog-6-tooth') ->collapsed(), ]) // 項目 ->navigationItems([ NavigationItem::make('google') ->group('Shop') ->url('https://google.com') ]) } } ``` 完成程式碼 ``` <?php namespace App\Providers\Filament; use Filament\Facades\Filament; use Filament\Http\Middleware\Authenticate; use Filament\Http\Middleware\DisableBladeIconComponents; use Filament\Http\Middleware\DispatchServingFilamentEvent; use Filament\Navigation\NavigationGroup; use Filament\Navigation\NavigationItem; use Filament\Pages; use Filament\Panel; use Filament\PanelProvider; use Filament\Support\Colors\Color; use Filament\Widgets; use Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse; use Illuminate\Cookie\Middleware\EncryptCookies; use Illuminate\Foundation\Http\Middleware\VerifyCsrfToken; use Illuminate\Routing\Middleware\SubstituteBindings; use Illuminate\Session\Middleware\AuthenticateSession; use Illuminate\Session\Middleware\StartSession; use Illuminate\View\Middleware\ShareErrorsFromSession; class AdminPanelProvider extends PanelProvider { public function panel(Panel $panel): Panel { return $panel ->id('admin') ->path('admin') // 組 ->navigationGroups([ NavigationGroup::make() ->label('Shop') ->icon('heroicon-o-shopping-cart'), NavigationGroup::make() ->label('Blog') ->icon('heroicon-o-pencil'), NavigationGroup::make() ->label('Settings') ->icon('heroicon-o-cog-6-tooth') ->collapsed(), ]) // 項目 ->navigationItems([ NavigationItem::make('google') ->group('Shop') ->url('https://google.com') ]) ->colors([ 'primary' => Color::Amber, ]) ->login() ->discoverResources(in: app_path('Filament/Admin/Resources'), for: 'App\\Filament\\Admin\\Resources') ->discoverPages(in: app_path('Filament/Admin/Pages'), for: 'App\\Filament\\Admin\\Pages') ->pages([ Pages\Dashboard::class, ]) ->discoverWidgets(in: app_path('Filament/Admin/Widgets'), for: 'App\\Filament\\Admin\\Widgets') ->widgets([ Widgets\AccountWidget::class, Widgets\FilamentInfoWidget::class, ]) ->middleware([ EncryptCookies::class, AddQueuedCookiesToResponse::class, StartSession::class, AuthenticateSession::class, ShareErrorsFromSession::class, VerifyCsrfToken::class, SubstituteBindings::class, DisableBladeIconComponents::class, DispatchServingFilamentEvent::class, ]) ->authMiddleware([ Authenticate::class, ]); } } ``` 這時選單就出現了 ![圖片](https://hackmd.io/_uploads/Sk9thQhSA.png) ## 參考資料 https://laravel-filament.cn/docs/zh-CN/3.x/panels/navigation