Filament Navigation Menu Items: Badges with Numbers and Colors

Filament allows you to add badges with numbers to the navigation items. In this tutorial, let's see all the options and how they look visually.

Badge can be added by using the getNavigationBadge() method in the Resource.

public static function getNavigationBadge(): ?string
{
    return (string) static::$model::where('status', 'new')->count();
}

By default, this will add a badge with a primary color.

You can change the badge color using the getNavigationBadgeColor() method. You can use danger, gray, info, primary, success, or warning colors.

public static function getNavigationBadgeColor(): ?string
{
    return static::getModel()::count() > 100 ? 'success' : 'primary';
}

By default, when you hover over a badge, there is no tooltip explaining what that value means. But we can add a tooltip in two ways. The first way is to add a tooltip to the property.

protected static ?string $navigationBadgeTooltip = 'The number of new orders';

The second way is to add a message in a method.

public static function getNavigationBadgeTooltip(): ?string
{
    return 'The number of new orders';
}