Setelah mengenal Filament Panel, saatnya memahami komponen penting di dalamnya yaitu Filament Navigation. Navigasi adalah bagian yang mengatur menu dan struktur pada sidebar admin panel. Dengan navigasi yang tersusun rapi, pengguna dapat mengakses setiap resource atau fitur dengan mudah. Filament menyediakan mekanisme otomatis untuk membangkitkan navigasi dari resource yang dibuat, namun juga memberi fleksibilitas tinggi untuk melakukan kustomisasi sesuai kebutuhan aplikasi.

Bagaimana Filament Navigation Bekerja

Secara default, setiap kali developer membuat resource CRUD menggunakan command Filament, resource tersebut akan otomatis muncul di sidebar panel tanpa konfigurasi tambahan.

Contoh membuat resource:

php artisan make:filament-resource ProductResource

Hasilnya, menu navigasi bernama “Products” akan tampil pada sidebar panel.

Filament melakukan ini berdasarkan metadata yang berada dalam ProductResource itu sendiri, seperti label, group, dan icon.

Menentukan Label Navigasi

Kadang label default dari resource tidak sesuai dengan istilah bisnis aplikasi. Untuk mengatur label navigasi, gunakan method:

public static function getNavigationLabel(): string
{
    return 'Produk';
}

Dengan cara ini, menu akan tampil sebagai "Produk" di sidebar.

Mengatur Grup Navigasi (Navigation Group)

Untuk aplikasi besar, grup navigasi sangat penting agar panel tidak terlihat berantakan.

Contoh mengelompokkan resource ke dalam grup:

public static function getNavigationGroup(): ?string
{
    return 'Master Data';
}

Di sidebar, nantinya akan muncul grup “Master Data” yang berisi resource terkait.

Menambahkan Icon Pada Navigasi

Filament menggunakan icon berbasis Heroicon. Kamu dapat mengatur icon navigasi seperti ini:

public static function getNavigationIcon(): string
{
    return 'heroicon-o-tag';
}

Dengan icon, tampilan panel terlihat lebih profesional dan informatif.

Mengatur Urutan Menu (Navigation Sort)

Jika ingin menentukan posisi atau urutan menu, gunakan method berikut:

public static function getNavigationSort(): ?int
{
    return 1;
}

Semakin kecil angkanya, semakin atas posisi resource pada navigation.

Menyembunyikan Resource dari Navigasi

Tidak semua resource perlu muncul di sidebar. Ada resource yang hanya dipanggil melalui relasi atau action tertentu.

Untuk menyembunyikan navigasi dari resource:

public static function shouldRegisterNavigation(): bool
{
    return false;
}

Resource tetap ada, tetapi tidak muncul di menu.

Navigasi Custom Tanpa Resource

Selain resource CRUD, kamu juga dapat menambahkan menu navigasi custom, misalnya untuk link ke halaman statis, dokumentasi, atau eksternal.

Contoh custom nav di Panel Provider:

$panel->navigationItems([
    NavigationItem::make('Laporan')
        ->url('/admin/reports')
        ->icon('heroicon-o-document-chart')
        ->sort(2)
]);

Atau link ke website eksternal:

NavigationItem::make('Homepage')
    ->url('https://example.com', shouldOpenInNewTab: true)

Navigation Berdasarkan Role atau Permission

Untuk aplikasi dengan role management, navigasi dapat disesuaikan berdasarkan permission user.

Contoh menggunakan Spatie Permission:

public static function canViewAny(User $user): bool
{
    return $user->hasPermissionTo('view products');
}

Dengan ini, hanya user tertentu yang dapat melihat menu tersebut.

Navigation pada Multi Panel

Jika aplikasi memiliki lebih dari satu Filament Panel, resource dapat di-attach ke panel tertentu.

Contoh dalam provider panel:

$panel->resources([
    ProductResource::class,
]);

Dengan ini, resource tidak muncul otomatis di panel lain, sebuah fitur penting untuk aplikasi multi-role seperti:

✔ Admin Panel

✔ Manager Panel

✔ Vendor Panel

Navigation Collapse & Expand

Filament mendukung fitur collapse untuk group navigation sehingga sidebar tetap rapi.

Contoh group:

public static function getNavigationGroup(): string
{
    return 'Manajemen Konten';
}

Group dapat collapse secara otomatis ketika banyak resource.

Best Practice Menggunakan Filament Navigation

Berikut beberapa best practice saat menggunakan navigasi:

✔ Gunakan group untuk kategori menu besar

✔ Selalu beri icon agar lebih user-friendly

✔ Sembunyikan resource yang tidak perlu muncul

✔ Pindahkan resource ke panel spesifik dalam multi-panel

✔ Gunakan sort untuk menjaga urutan logis

✔ Terapkan permission untuk navigasi role-based

Dengan mengikuti ini, panel admin akan terasa jauh lebih profesional.

Kesimpulan

Filament Navigation adalah sistem pengelolaan menu sidebar yang fleksibel dan sangat membantu dalam membangun admin panel yang terstruktur. Filament memberikan kontrol penuh dalam hal label, grup, icon, urutan, hingga visibility berdasarkan role. Baik untuk aplikasi sederhana maupun kompleks, navigasi dalam Filament sangat mudah dikustomisasi dan dioptimalkan.

Baca Juga: Filament Theme di Laravel: Kustomisasi Tampilan Admin dengan Tailwind