Filament Menu Builder

This Filament package allows you to create and manage menus in your Filament application.

Note

I created this for my personal project, so some features and extensibility are still lacking. Pull requests are welcome.

Installation

You can install the package via composer:

composer require datlechin/filament-menu-builder

You need to publish the migrations and run them:

php artisan vendor:publish --tag="filament-menu-builder-migrations"
php artisan migrate

You can publish the config file with:

php artisan vendor:publish --tag="filament-menu-builder-config"

Optionally, if you want to customize the views, you can publish them with:

php artisan vendor:publish --tag="filament-menu-builder-views"

This is the contents of the published config file:

return [
    'tables' => [
        'menus' => 'menus',
        'menu_items' => 'menu_items',
        'menu_locations' => 'menu_locations',
    ],
];

Add the plugin to AdminPanelProvider:

use Datlechin\FilamentMenuBuilder\FilamentMenuBuilderPlugin;

$panel
    ...
    ->plugin(FilamentMenuBuilderPlugin::make())

Usage

Adding locations

Locations are the places where you can display menus in the frontend. You can add locations in the AdminPanelProvider:

use Datlechin\FilamentMenuBuilder\FilamentMenuBuilderPlugin;

$panel
    ...
    ->plugin(
        FilamentMenuBuilderPlugin::make()
            ->addLocation('header', 'Header')
            ->addLocation('footer', 'Footer')
    )

The first argument is the key of the location, and the second argument is the title of the location.

Alternatively, you may add locations using an array:

use Datlechin\FilamentMenuBuilder\FilamentMenuBuilderPlugin;

$panel
    ...
    ->plugin(
        FilamentMenuBuilderPlugin::make()
            ->addLocations([
                'header' => 'Header',
                'footer' => 'Footer',
            ])
    )

Setting up Menu Panels

Menu panels are the panels that contain the menu items which you can add to the menus.

Custom Menu Panel

By default, the package provides a Custom Link menu panel that allows you to add custom links to the menus.

Static Menu Panel

The static menu panel allows you to add menu items manually.

use Datlechin\FilamentMenuBuilder\FilamentMenuBuilderPlugin;
use Datlechin\FilamentMenuBuilder\MenuPanel\StaticMenuPanel;

$panel
    ...
    ->plugin(
        FilamentMenuBuilderPlugin::make()
            ->addMenuPanels([
                StaticMenuPanel::make()
                    ->add('Home', url('/'))
                    ->add('Blog', url('/blog')),
            ])
    )

Similarily to locations, you may also add static menu items using an array:

use Datlechin\FilamentMenuBuilder\FilamentMenuBuilderPlugin;
use Datlechin\FilamentMenuBuilder\MenuPanel\StaticMenuPanel;

$panel
    ...
    ->plugin(
        FilamentMenuBuilderPlugin::make()
            ->addMenuPanels([
                StaticMenuPanel::make()
                    ->addMany([
                        'Home' => url('/'),
                        'Blog' => url('/blog'),
                    ])
            ])
    )

Model Menu Panel

The model menu panel allows you to add menu items from a model.

To create a model menu panel, your model must implement the \Datlechin\FilamentMenuBuilder\Contracts\MenuPanelable interface and \Datlechin\FilamentMenuBuilder\Concerns\HasMenuPanel trait.

Then you will need to implement the following methods:

use Illuminate\Database\Eloquent\Model;
use Datlechin\FilamentMenuBuilder\Contracts\MenuPanelable;

class Category extends Model implements MenuPanelable
{
    public function getMenuPanelTitleColumn(): string
    {
        return 'name';
    }

    public function getMenuPanelUrlUsing(): callable
    {
        return fn (self $model) => route('categories.show', $model->slug);
    }
}

Then you can add the model menu panel to the plugin:

use Datlechin\FilamentMenuBuilder\FilamentMenuBuilderPlugin;
use Datlechin\FilamentMenuBuilder\MenuPanel\ModelMenuPanel;

$panel
    ...
    ->plugin(
        FilamentMenuBuilderPlugin::make()
            ->addMenuPanels([
                ModelMenuPanel::make()
                    ->model(\App\Models\Category::class),
            ])
    )

Additional Menu Panel Options

When registering a menu panel, multiple methods are available allowing you to configure the panel's behavior such as collapse state and pagination.

use Datlechin\FilamentMenuBuilder\FilamentMenuBuilderPlugin;
use Datlechin\FilamentMenuBuilder\MenuPanel\StaticMenuPanel;

$panel
    ...
    ->plugin(
        FilamentMenuBuilderPlugin::make()
            ->addMenuPanels([
                StaticMenuPanel::make()
                    ->addMany([
                        ...
                    ])
                    ->description('Lorem ipsum...')
                    ->icon('heroicon-m-link')
                    ->collapsed(true)
                    ->collapsible(true)
                    ->paginate(perPage: 5, condition: true)
            ])
    )

Custom Fields

In some cases, you may want to extend menu and menu items with custom fields. To do this, start by passing an array of form components to the addMenuFields and addMenuItemFields methods when registering the plugin:

use Filament\Forms\Components\TextInput;
use Filament\Forms\Components\Toggle;
use Datlechin\FilamentMenuBuilder\FilamentMenuBuilderPlugin;

$panel
    ...
    ->plugin(
        FilamentMenuBuilderPlugin::make()
            ->addMenuFields([
                Toggle::make('is_logged_in'),
            ])
            ->addMenuItemFields([
                TextInput::make('classes'),
            ])
    )

Next, create a migration adding the additional columns to the appropriate tables:

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::table(config('filament-menu-builder.tables.menus'), function (Blueprint $table) {
            $table->boolean('is_logged_in')->default(false);
        });

        Schema::table(config('filament-menu-builder.tables.menu_items'), function (Blueprint $table) {
            $table->string('classes')->nullable();
        });
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::table(config('filament-menu-builder.tables.menus'), function (Blueprint $table) {
            $table->dropColumn('is_logged_in');
        });

        Schema::table(config('filament-menu-builder.tables.menu_items'), function (Blueprint $table) {
            $table->dropColumn('classes');
        });
    }
}

Once done, simply run php artisan migrate.

Customizing the Resource

Out of the box, a default Menu Resource is registered with Filament when registering the plugin in the admin provider. This resource can be extended and overridden allowing for more fine-grained control.

Start by extending the Datlechin\FilamentMenuBuilder\Resources\MenuResource class in your application. Below is an example:

namespace App\Filament\Plugins\Resources;

use Datlechin\FilamentMenuBuilder\Resources\MenuResource as BaseMenuResource;

class MenuResource extends BaseMenuResource
{
    protected static ?string $navigationGroup = 'Navigation';

    public static function getNavigationBadge(): ?string
    {
        return number_format(static::getModel()::count());
    }
}

Now pass the custom resource to usingResource while registering the plugin with the panel:

use App\Filament\Plugins\Resources\MenuResource;
use Datlechin\FilamentMenuBuilder\FilamentMenuBuilderPlugin;

$panel
    ...
    ->plugin(
        FilamentMenuBuilderPlugin::make()
            ->usingResource(MenuResource::class)
    )

Customizing the Models

The default models used by the plugin can be configured and overridden similarly to the plugin resource as seen above.

Simply extend the default models and then pass the classes when registering the plugin in the panel:

use App\Models\Menu;
use App\Models\MenuItem;
use App\Models\MenuLocation;
use Datlechin\FilamentMenuBuilder\FilamentMenuBuilderPlugin;

$panel
    ...
    ->plugin(
        FilamentMenuBuilderPlugin::make()
            ->usingMenuModel(Menu::class)
            ->usingMenuItemModel(MenuItem::class)
            ->usingMenuLocationModel(MenuLocation::class)
    )

Using Menus

Getting the assigned menu for a registered location can be done using the Menu model. Below we will call the menu assigned to the primary location:

use Datlechin\FilamentMenuBuilder\Models\Menu;

$menu = Menu::location('primary');

Menu items can be iterated from the menuItems relationship:

@foreach ($menu->menuItems as $item)
    <a href="{{ $item->url }}">{{ $item->title }}</a>
@endforeach

When a menu item is a parent, a collection of the child menu items will be available on the children property:

@foreach ($menu->menuItems as $item)
    <a href="{{ $item->url }}">{{ $item->title }}</a>

    @if ($item->children)
        @foreach ($item->children as $child)
            <a href="{{ $child->url }}">{{ $child->title }}</a>
        @endforeach
    @endif
@endforeach

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

• Ngo Quoc Dat
• Log1x
• All Contributors

License

The MIT License (MIT). Please see License File for more information.