Menu Items: Ordering, Grouping, Icons, Badges

For now, in this course, we've been generating Filament Resources with menu items being auto-generated for us. They have the same icon and a pretty random order. In this lesson, let's learn how to customize it all.

Menu: Left or Top?

So, for now, we have this view in the left menu:

First quick change: did you know we can easily change the menu from the left to the top? It's configurable by adding topNavigation() in the main AdminPanelProvider:

app/Providers/Filament/AdminPanelProvider.php:

public function panel(Panel $panel): Panel
{
    return $panel
        ->default()
        ->id('admin')
        ->path('admin')
        ->login()
        ->registration()
        ->topNavigation() 

With this simple change, the menu looks like this:

Ordering Menu Items

Next, if you don't specify any order for menu items, they are ordered alphabetically.

To change that, add an integer property $navigationSort in each Filament Resource, representing their order position.

For example, I want to sort the menu items in the order they would be used: from the most often (Orders) to the...