New in EasyAdmin 4: Menu Badges

19 Jan 2022

EasyAdmin 4.0.2 has been released and it includes one of the most requested features by the community: menu badges. These badges are commonly used to display some numeric value next to menu items (e.g. number of notifications, number of new clients, number of invoices pending to be paid, etc.)

As explained in the docs about menu item configuration options, these badges are configured with the setBadge() method. For example, to show the number of comments pending to be reviewed:

namespace App\Controller\Admin;

use EasyCorp\Bundle\EasyAdminBundle\Config\MenuItem;
use EasyCorp\Bundle\EasyAdminBundle\Controller\AbstractDashboardController;

class DashboardController extends AbstractDashboardController
{
    public function __construct(private CommentRepository $comments)
    {
    }

    public function configureMenuItems(): iterable
    {
        // ...

        // get the number of pending comments somehow; this is a regular Symfony
        // controller, so you can for example call to your entity repositories
        $numPendingComments = $this->comments->getNumPendingReview();
        yield MenuItem::linkToCrud('Comments', 'far fa-comments', Comment::class)
            ->setBadge($numPendingComments);
    }

    // ...
}

The default design of menu badges is similar to what you can find in other apps and websites:

Even if badges usually display numeric values, you can pass to setBadge() any numeric or string variable (including stringable objects). In addition, you can fully customize the design of menu badges:

// the second argument can be any of the predefined Bootstrap styles:
// `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `light`, `dark`
yield MenuItem::linkToCrud('...', '...', '...')
    ->setBadge($numPendingComments, 'warning');

// if none of the default styles fits your backend, pass the contents of the
// HTML `style` attribute as the second argument:
yield MenuItem::linkToCrud('...', '...', '...')
    ->setBadge('NEW', 'background: transparent; color: red; outline: 2px solid red');

The following screenshot shows a backend with several menu badges with custom design:

EasyAdmin Blog

New in EasyAdmin 4: Menu Badges