Added navigation badge examples

docs-assets/app/app/Livewire/Panels/Navigation/Badge.php

@@ -0,0 +1,24 @@
+<?php
+
+namespace App\Livewire\Panels\Navigation;
+
+use Filament\Navigation\NavigationItem;
+use Filament\Pages\Page;
+
+class Badge extends Page
+{
+    protected static string $view = 'livewire.panels.navigation.badge';
+
+    public function mount()
+    {
+        filament()
+            ->getCurrentPanel()
+            ->navigationItems([
+                NavigationItem::make()
+                    ->label('Orders')
+                    ->url(fn(): string => '#')
+                    ->icon('heroicon-o-shopping-cart')
+                    ->badge(24),
+            ]);
+    }
+}

docs-assets/app/app/Livewire/Panels/Navigation/BadgeColor.php

@@ -0,0 +1,25 @@
+<?php
+
+namespace App\Livewire\Panels\Navigation;
+
+use Filament\Navigation\NavigationItem;
+use Filament\Pages\Page;
+use Filament\Support\Colors\Color;
+
+class BadgeColor extends Page
+{
+    protected static string $view = 'livewire.panels.navigation.badge-color';
+
+    public function mount()
+    {
+        filament()
+            ->getCurrentPanel()
+            ->navigationItems([
+                NavigationItem::make()
+                    ->label('Orders')
+                    ->url(fn(): string => '#')
+                    ->icon('heroicon-o-shopping-cart')
+                    ->badge(32, Color::Red),
+            ]);
+    }
+}

docs-assets/app/app/Livewire/Panels/Navigation/BadgeTooltip.php

@@ -0,0 +1,25 @@
+<?php
+
+namespace App\Livewire\Panels\Navigation;
+
+use Filament\Navigation\NavigationItem;
+use Filament\Pages\Page;
+
+class BadgeTooltip extends Page
+{
+    protected static string $view = 'livewire.panels.navigation.badge-tooltip';
+
+    public function mount()
+    {
+        filament()
+            ->getCurrentPanel()
+            ->navigationItems([
+                NavigationItem::make()
+                    ->label('Users')
+                    ->url(fn(): string => '#')
+                    ->icon('heroicon-o-user-group')
+                    ->badge(12)
+                    ->badgeTooltip('The number of users'),
+            ]);
+    }
+}

docs-assets/app/resources/views/livewire/panels/navigation/badge-color.blade.php

@@ -0,0 +1,3 @@
+<div>
+    
+</div>

docs-assets/app/resources/views/livewire/panels/navigation/badge-tooltip.blade.php

@@ -0,0 +1,3 @@
+<div>
+
+</div>

docs-assets/app/resources/views/livewire/panels/navigation/badge.blade.php

@@ -0,0 +1,3 @@
+<div>
+    
+</div>

docs-assets/app/routes/web.php

@@ -8,6 +8,9 @@ use App\Livewire\Infolists\EntriesDemo;
 use App\Livewire\Infolists\LayoutDemo as InfolistsLayoutDemo;
 use App\Livewire\NotificationsDemo;
 use App\Livewire\Panels\Navigation\ActiveIcon;
+use App\Livewire\Panels\Navigation\Badge;
+use App\Livewire\Panels\Navigation\BadgeColor;
+use App\Livewire\Panels\Navigation\BadgeTooltip;
 use App\Livewire\Panels\Navigation\ChangeIcon;
 use App\Livewire\Panels\Navigation\CustomItems;
 use App\Livewire\Panels\Navigation\DisabledNavigation;
@@ -56,5 +59,8 @@ Route::group(['prefix' => 'panels'], function () {
         Route::get('top-navigation', TopNavigation::class);
         Route::get('sidebar-collapsible-on-desktop', SidebarCollapsibleOnDesktop::class);
         Route::get('sidebar-fully-collapsible-on-desktop', SidebarFullyCollapsibleOnDesktop::class);
+        Route::get('badge', Badge::class);
+        Route::get('badge-color', BadgeColor::class);
+        Route::get('badge-tooltip', BadgeTooltip::class);
     });
 });

docs-assets/screenshots/schema.js

@@ -2047,6 +2047,47 @@ export default {
             await new Promise((resolve) => setTimeout(resolve, 500))
         },
     },
+    'panels/navigation/badge': {
+        url: 'panels/navigation/badge',
+        selector: 'body',
+        viewport: {
+            width: 1080,
+            height: 640,
+            deviceScaleFactor: 0,
+        },
+        crop: (image) => {
+            return image.extract({ width: 650, height: 500, left: 0, top: 0 })
+        },
+    },
+    'panels/navigation/badge-color': {
+        url: 'panels/navigation/badge-color',
+        selector: 'body',
+        viewport: {
+            width: 1080,
+            height: 640,
+            deviceScaleFactor: 0,
+        },
+        crop: (image) => {
+            return image.extract({ width: 650, height: 500, left: 0, top: 0 })
+        },
+    },
+    'panels/navigation/badge-tooltip': {
+        url: 'panels/navigation/badge-tooltip',
+        selector: 'body',
+        viewport: {
+            width: 1080,
+            height: 640,
+            deviceScaleFactor: 0,
+        },
+        crop: (image) => {
+            return image.extract({ width: 750, height: 500, left: 0, top: 0 })
+        },
+        before: async (page) => {
+            await page.hover('.fi-badge')
+
+            await new Promise((resolve) => setTimeout(resolve, 500))
+        },
+    },
     'tables/example': {
         url: 'tables?table=example',
         selector: 'body',

packages/panels/docs/06-navigation.md

@@ -70,6 +70,8 @@ public static function getNavigationBadge(): ?string
 }
 ```
 
+<AutoScreenshot name="panels/navigation/badge" alt="Navigation Item with Badge" version="3.x" />
+
 If a badge value is returned by `getNavigationBadge()`, it will display using the primary color by default. To style the badge contextually, return either `danger`, `gray`, `info`, `primary`, `success` or `warning` from the `getNavigationBadgeColor()` method:
 
 ```php
@@ -79,6 +81,8 @@ public static function getNavigationBadgeColor(): ?string
 }
 ```
 
+<AutoScreenshot name="panels/navigation/badge-color" alt="Navigation Item with Badge Color" version="3.x" />
+
 A custom tooltip for the navigation badge can be set in `$navigationBadgeTooltip`:
 
 ```php
@@ -94,6 +98,8 @@ public static function getNavigationBadgeTooltip(): ?string
 }
 ```
 
+<AutoScreenshot name="panels/navigation/badge-tooltip" alt="Navigation Item with Badge Tooltip" version="3.x" />
+
 ## Grouping navigation items
 
 You may group navigation items by specifying a `$navigationGroup` property on a [resource](resources/getting-started) and [custom page](pages):