A flexible front end navigation build using the Filament admin for Laravel

navigation.blade.php

//quick and dirty example

<ul class="prose p-4 mb-12">
    @foreach($mainMenu->items as $item)
        <li class="border-b border-primary-300 pb-4">
            <a href="{{ url($item['data']['url']) }}"
               @if($item['type'] === 'external-link')
                   target="{{ $item['data']['target']}}"
                @endif
            >
                @isset($item['data']['title'])
                    {{$item['data']['title']}}
                @else
                    {{ $item['label'] }}
                @endisset

                @isset($item['data']['description'])
                    <span class="block text-xs">{{$item['data']['description']}}</span>
                @endisset

                @if($item['type'] === 'external-link')
                    <x-heroicon-o-external-link class="inline-block w-4 h-4" />
                @endif
            </a>

            @if($item['children'])
                <ul>
                @foreach($item['children'] as $child)
                    <li>
                        <a href="{{ url($item['data']['url']. '/' . $child['data']['url']) }}">
                            @isset($child['data']['title'])
                                {{$child['data']['title']}}
                            @else
                                {{ $child['label'] }}
                            @endisset
                        </a>
                    </li>
                @endforeach
                </ul>
            @endif
        </li>
    @endforeach
</ul>

NavigationComposer.php

<?php

namespace App\View\Composers;

use Illuminate\View\View;
use RyanChandler\FilamentNavigation\Facades\FilamentNavigation;

class NavigationComposer
{

    public function __construct(
    ) {}

    /**
     * Bind data to the view.
     */
    public function compose(View $view): void
    {
        $mainMenu = FilamentNavigation::get('main-menu');
        $view->with('mainMenu', $mainMenu);
    }
}

ViewServiceProvider.php

<?php

namespace App\Providers;

use App\View\Composers\NavigationComposer;
use Filament\Forms\Components\Select;
use Filament\Forms\Components\TextInput;
use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Facades\View;
use RyanChandler\FilamentNavigation\Facades\FilamentNavigation;
use Z3d0X\FilamentFabricator\Models\Page;

class ViewServiceProvider extends ServiceProvider
{
    /**
     * Register services.
     */
    public function register(): void
    {
        //
    }

    /**
     * Bootstrap services.
     */
    public function boot(): void
    {
        View::composer('*', NavigationComposer::class);

        FilamentNavigation::addItemType('Link', [
            TextInput::make('title')->helperText('This is the text that will be displayed in the navigation menu.'),
            TextInput::make('description'),
            TextInput::make('url')->required(),
        ]);

        FilamentNavigation::addItemType('Existing Page', [
            Select::make('page_id')
                ->label('Page')
                ->searchable()
                ->options(function () {
                    return Page::pluck('title', 'id', 'slug');
                })
                ->reactive()
                ->afterStateUpdated(function (callable $set, $state) {
                    if($state) {
                        $url = Page::whereId($state)->value('slug');
                        $set('url', $url);
                    } else {
                        $set('url', '');
                    }
                }),
            TextInput::make('url')
                ->label('URL')
                ->disabled()
                ->helperText('This URL is automatically generated based on the page you select above.')
                ->hidden(fn (\Closure $get) => $get('page_id') === null),
        ]);
    }
}