Filament HUB
Hero background

Navigation Badges

Transform your navigation from static menu items into dynamic, informative interfaces that communicate real-time status, counts, and critical information at a glance. Filament's badge system goes beyond simple number displays to create contextual indicators that guide users through complex applications with intelligent visual cues and responsive feedback.

# Count Badges

Count Badges

Display numeric counts directly in your navigation to show pending items, new notifications, or record totals. These badges automatically update based on your model data and provide instant visual feedback about application state without requiring users to navigate into each section.

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

# Status Badges with Contextual Colors

Status Badges with Contextual Colors

Move beyond simple numbers to create color-coded status indicators that communicate urgency, health, and priority levels. Filament provides six semantic colors (danger, gray, info, primary, success, warning) that automatically adapt to your theme while maintaining accessibility standards.

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

public static function getNavigationBadge(): ?string
{
    $urgentCount = static::getModel()::where('priority', 'urgent')->count();
    return $urgentCount > 0 ? $urgentCount : null;
}

# Textual Badges

Textual Badges

Replace numeric indicators with descriptive text labels that communicate status, priority, or operational state in human-readable format. Text badges are perfect for showing system health, operational modes, or quick status summaries that provide immediate context without requiring users to interpret numbers.

public static function getNavigationBadge(): ?string
{
    $systemStatus = Cache::get('system_status', 'unknown');
    
    return match($systemStatus) {
        'healthy' => 'ONLINE',
        'maintenance' => 'MAINT',
        'degraded' => 'SLOW',
        'offline' => 'DOWN',
        default => 'UNKNOWN'
    };
}

public static function getNavigationBadgeColor(): ?string
{
    $systemStatus = Cache::get('system_status', 'unknown');
    
    return match($systemStatus) {
        'healthy' => 'success',
        'maintenance' => 'warning',
        'degraded' => 'warning',
        'offline' => 'danger',
        default => 'gray'
    };
}