# Getting started

By default, Filament will register navigation items for each of your resources and custom pages . These classes contain static properties and methods that you can override, to configure that navigation item and its order:

protected static ?string $navigationIcon = 'heroicon-o-document-text';




    
 
protected static ?string $navigationLabel = 'Custom Navigation Label';
 
protected static ?int $navigationSort = 3;
protected static ?string $navigationIcon = 'heroicon-o-document-text';
protected static ?string $navigationLabel = 'Custom Navigation Label';
protected static ?int $navigationSort = 3;
<p>The <code>$navigationIcon</code> supports the name of any Blade component, and passes a set of formatting classes to it. By default, the <a href="https://github.com/blade-ui-kit/blade-heroicons/tree/1.3.1">Blade Heroicons v1</a> package is installed, so you may use the name of any <a href="https://v1.heroicons.com">Heroicons v1</a> out of the box. However, you may create your own custom icon components or install an alternative library if you wish.</p>
<h2 id="navigation-item-badges"><a class="heading-anchor" href="#navigation-item-badges"><span class="heading-anchor-icon" aria-hidden="true">#</span></a>Navigation item badges</h2>
<p>To add a badge next to the navigation item, you can use the <code>getNavigationBadge()</code> method and return the content of the badge:</p>
<pre class="torchlight" style="background-color: #292D3E; --theme-selection-background: #00000080;" data-torchlight-processed="3449c9e5e332f1dbb81505cd739fbf3f"><code class="language-php"><!-- Syntax highlighted by torchlight.dev --><div class="line"><span style="color: #C792EA;">protected</span><span style="color: #A6ACCD;"> </span><span style="color: #C792EA;">static</span><span style="color: #A6ACCD;"> </span><span style="color: #C792EA;">function</span><span style="color: #A6ACCD;"> </span><span style="color: #82AAFF;">getNavigationBadge</span><span style="color: #89DDFF;">():</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">?</span><span style="color: #F78C6C;">string</span></div><div class="line"><span style="color: #89DDFF;">{</span></div><div class="line"><span style="color: #A6ACCD;">    </span><span style="color: #89DDFF;">return</span><span style="color: #A6ACCD;"> </span><span style="color: #C792EA;">static</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">getModel</span><span style="color: #89DDFF;">()::</span><span style="color: #82AAFF;">count</span><span style="color: #89DDFF;">();</span></div><div class="line"><span style="color: #89DDFF;">}</span></div><textarea data-torchlight-original="true" style="display: none !important;">protected static function getNavigationBadge(): ?string
    return static::getModel()::count();
<p>If a badge value is returned by <code>getNavigationBadge()</code>, it will display using the primary Tailwind color by default. To style the badge contextually, return either <code>danger</code>, <code>warning</code>, <code>success</code> or <code>secondary</code> from the <code>getNavigationBadgeColor()</code> method:</p>
<pre class="torchlight" style="background-color: #292D3E; --theme-selection-background: #00000080;" data-torchlight-processed="3449c9e5e332f1dbb81505cd739fbf3f"><code class="language-php"><!-- Syntax highlighted by torchlight.dev --><div class="line"><span style="color: #C792EA;">protected</span><span style="color: #A6ACCD;"> </span><span style="color: #C792EA;">static</span><span style="color: #A6ACCD;"> </span><span style="color: #C792EA;">function</span><span style="color: #A6ACCD;"> </span><span style="color: #82AAFF;">getNavigationBadgeColor</span><span style="color: #89DDFF;">():</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">?</span><span style="color: #F78C6C;">string</span></div><div class="line"><span style="color: #89DDFF;">{</span></div><div class="line"><span style="color: #A6ACCD;">    </span><span style="color: #89DDFF;">return</span><span style="color: #A6ACCD;"> </span><span style="color: #C792EA;">static</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">getModel</span><span style="color: #89DDFF;">()::</span><span style="color: #82AAFF;">count</span><span style="color: #89DDFF;">()</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">></span><span style="color: #A6ACCD;"> </span><span style="color: #F78C6C;">10</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">?</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">'</span><span style="color: #C3E88D;">warning</span><span style="color: #89DDFF;">'</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">:</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">'</span><span style="color: #C3E88D;">primary</span><span style="color: #89DDFF;">'</span><span style="color: #89DDFF;">;</span></div><div class="line"><span style="color: #89DDFF;">}</span></div><textarea data-torchlight-original="true" style="display: none !important;">protected static function getNavigationBadgeColor(): ?string
    return static::getModel()::count() > 10 ? 'warning' : 'primary';
<h2 id="grouping-navigation-items"><a class="heading-anchor" href="#grouping-navigation-items"><span class="heading-anchor-icon" aria-hidden="true">#</span></a>Grouping navigation items</h2>
<p>You may group navigation items by specifying a <code>$navigationGroup</code> property on a <a href="resources">resource</a> and <a href="pages">custom page</a>:</p>
<pre class="torchlight" style="background-color: #292D3E; --theme-selection-background: #00000080;" data-torchlight-processed="3449c9e5e332f1dbb81505cd739fbf3f"><code class="language-php"><!-- Syntax highlighted by torchlight.dev --><div class="line"><span style="color: #C792EA;">protected</span><span style="color: #A6ACCD;"> </span><span style="color: #C792EA;">static</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">?</span><span style="color: #F78C6C;">string</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">$</span><span style="color: #A6ACCD;">navigationGroup </span><span style="color: #89DDFF;">=</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">'</span><span style="color: #C3E88D;">Settings</span><span style="color: #89DDFF;">'</span><span style="color: #89DDFF;">;</span></div><textarea data-torchlight-original="true" style="display: none !important;">protected static ?string $navigationGroup = 'Settings';
<p>All items in the same navigation group will be displayed together under the same group label, "Settings" in this case. Ungrouped items will remain at the top of the sidebar.</p>
<h3 id="customizing-navigation-groups"><a class="heading-anchor" href="#customizing-navigation-groups"><span class="heading-anchor-icon" aria-hidden="true">#</span></a>Customizing navigation groups</h3>
<p>You may customize navigation groups by calling <code>Filament::registerNavigationGroups()</code> from the <code>boot()</code> method of any service provider, and passing <code>NavigationGroup</code> objects in order:</p>
<pre class="torchlight" style="background-color: #292D3E; --theme-selection-background: #00000080;" data-torchlight-processed="3449c9e5e332f1dbb81505cd739fbf3f"><code class="language-php"><!-- Syntax highlighted by torchlight.dev --><div class="line"><span style="color: #F78C6C;">use</span><span style="color: #FFCB6B;"> </span><span style="color: #A6ACCD;">Filament</span><span style="color: #89DDFF;">\</span><span style="color: #A6ACCD;">Facades</span><span style="color: #89DDFF;">\</span><span style="color: #A6ACCD;">Filament</span><span style="color: #89DDFF;">;</span></div><div class="line"><span style="color: #F78C6C;">use</span><span style="color: #FFCB6B;"> </span><span style="color: #A6ACCD;">Filament</span><span style="color: #89DDFF;">\</span><span style="color: #A6ACCD;">Navigation</span><span style="color: #89DDFF;">\</span><span style="color: #A6ACCD;">NavigationGroup</span><span style="color: #89DDFF;">;</span></div><div class="line"><span style="color: #F78C6C;">use</span><span style="color: #FFCB6B;"> </span><span style="color: #A6ACCD;">Illuminate</span><span style="color: #89DDFF;">\</span><span style="color: #A6ACCD;">Support</span><span style="color: #89DDFF;">\</span><span style="color: #A6ACCD;">ServiceProvider</span><span style="color: #89DDFF;">;</span></div><div class="line"> </div><div class="line"><span style="color: #C792EA;">class</span><span style="color: #A6ACCD;"> </span><span style="color: #FFCB6B;">AppServiceProvider</span><span style="color: #A6ACCD;"> </span><span style="color: #C792EA;">extends</span><span style="color: #A6ACCD;"> </span><span style="color: #FFCB6B;">ServiceProvider</span></div><div class="line"><span style="color: #89DDFF;">{</span></div><div class="line"><span style="color: #A6ACCD;">    </span><span style="color: #C792EA;">public</span><span style="color: #A6ACCD;"> </span><span style="color: #C792EA;">function</span><span style="color: #A6ACCD;"> </span><span style="color: #82AAFF;">boot</span><span style="color: #89DDFF;">():</span><span style="color: #A6ACCD;"> </span><span style="color: #F78C6C;">void</span></div><div class="line"><span style="color: #A6ACCD;">    </span><span style="color: #89DDFF;">{</span></div><div class="line"><span style="color: #A6ACCD;">        </span><span style="color: #FFCB6B;">Filament</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">serving</span><span style="color: #89DDFF;">(</span><span style="color: #C792EA;">function</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">()</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">{</span></div><div class="line"><span style="color: #A6ACCD;">            </span><span style="color: #FFCB6B;">Filament</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">registerNavigationGroups</span><span style="color: #89DDFF;">([</span></div><div class="line"><span style="color: #A6ACCD;">                </span><span style="color: #FFCB6B;">NavigationGroup</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">make</span><span style="color: #89DDFF;">()</span></div><div class="line"><span style="color: #A6ACCD;">                     </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">label</span><span style="color: #89DDFF;">(</span><span style="color: #89DDFF;">'</span><span style="color: #C3E88D;">Shop</span><span style="color: #89DDFF;">'</span><span style="color: #89DDFF;">)</span></div><div class="line"><span style="color: #A6ACCD;">                     </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">icon</span><span style="color: #89DDFF;">(</span><span style="color: #89DDFF;">'</span><span style="color: #C3E88D;">heroicon-s-shopping-cart</span><span style="color: #89DDFF;">'</span><span style="color: #89DDFF;">),</span></div><div class="line"><span style="color: #A6ACCD;">                </span><span style="color: #FFCB6B;">NavigationGroup</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">make</span><span style="color: #89DDFF;">()</span></div><div class="line"><span style="color: #A6ACCD;">                    </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">label</span><span style="color: #89DDFF;">(</span><span style="color: #89DDFF;">'</span><span style="color: #C3E88D;">Blog</span><span style="color: #89DDFF;">'</span><span style="color: #89DDFF;">)</span></div><div class="line"><span style="color: #A6ACCD;">                    </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">icon</span><span style="color: #89DDFF;">(</span><span style="color: #89DDFF;">'</span><span style="color: #C3E88D;">heroicon-s-pencil</span><span style="color: #89DDFF;">'</span><span style="color: #89DDFF;">),</span></div><div class="line"><span style="color: #A6ACCD;">                </span><span style="color: #FFCB6B;">NavigationGroup</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">make</span><span style="color: #89DDFF;">()</span></div><div class="line"><span style="color: #A6ACCD;">                    </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">label</span><span style="color: #89DDFF;">(</span><span style="color: #89DDFF;">'</span><span style="color: #C3E88D;">Settings</span><span style="color: #89DDFF;">'</span><span style="color: #89DDFF;">)</span></div><div class="line"><span style="color: #A6ACCD;">                    </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">icon</span><span style="color: #89DDFF;">(</span><span style="color: #89DDFF;">'</span><span style="color: #C3E88D;">heroicon-s-cog</span><span style="color: #89DDFF;">'</span><span style="color: #89DDFF;">)</span></div><div class="line"><span style="color: #A6ACCD;">                    </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">collapsed</span><span style="color: #89DDFF;">(),</span></div><div class="line"><span style="color: #A6ACCD;">            </span><span style="color: #89DDFF;">]);</span></div><div class="line"><span style="color: #A6ACCD;">        </span><span style="color: #89DDFF;">});</span></div><div class="line"><span style="color: #A6ACCD;">    </span><span style="color: #89DDFF;">}</span></div><div class="line"><span style="color: #89DDFF;">}</span></div><textarea data-torchlight-original="true" style="display: none !important;">use Filament\Facades\Filament;
use Filament\Navigation\NavigationGroup;
use Illuminate\Support\ServiceProvider;
class AppServiceProvider extends ServiceProvider
    public function boot(): void
        Filament::serving(function () {
            Filament::registerNavigationGroups([
                NavigationGroup::make()
                     ->label('Shop')
                     ->icon('heroicon-s-shopping-cart'),
                NavigationGroup::make()
                    ->label('Blog')
                    ->icon('heroicon-s-pencil'),
                NavigationGroup::make()
                    ->label('Settings')
                    ->icon('heroicon-s-cog')
                    ->collapsed(),
<p>In this example, we pass in a custom <code>icon()</code> for the groups, and make one <code>collapsed()</code> by default.</p>
<h4 id="ordering-navigation-groups"><a class="heading-anchor" href="#ordering-navigation-groups"><span class="heading-anchor-icon" aria-hidden="true">#</span></a>Ordering navigation groups</h4>
<p>By using <code>registerNavigationGroups()</code>, you are defining a new order for the navigation groups in the sidebar. If you just want to reorder the groups and not define an entire <code>NavigationGroup</code> object, you may just pass the labels of the groups in the new order:</p>
<pre class="torchlight" style="background-color: #292D3E; --theme-selection-background: #00000080;" data-torchlight-processed="3449c9e5e332f1dbb81505cd739fbf3f"><code class="language-php"><!-- Syntax highlighted by torchlight.dev --><div class="line"><span style="color: #F78C6C;">use</span><span style="color: #FFCB6B;"> </span><span style="color: #A6ACCD;">Filament</span><span style="color: #89DDFF;">\</span><span style="color: #A6ACCD;">Facades</span><span style="color: #89DDFF;">\</span><span style="color: #A6ACCD;">Filament</span><span style="color: #89DDFF;">;</span></div><div class="line"> </div><div class="line"><span style="color: #FFCB6B;">Filament</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">registerNavigationGroups</span><span style="color: #89DDFF;">([</span></div><div class="line"><span style="color: #A6ACCD;">    </span><span style="color: #89DDFF;">'</span><span style="color: #C3E88D;">Shop</span><span style="color: #89DDFF;">'</span><span style="color: #89DDFF;">,</span></div><div class="line"><span style="color: #A6ACCD;">    </span><span style="color: #89DDFF;">'</span><span style="color: #C3E88D;">Blog</span><span style="color: #89DDFF;">'</span><span style="color: #89DDFF;">,</span></div><div class="line"><span style="color: #A6ACCD;">    </span><span style="color: #89DDFF;">'</span><span style="color: #C3E88D;">Settings</span><span style="color: #89DDFF;">'</span><span style="color: #89DDFF;">,</span></div><div class="line"><span style="color: #89DDFF;">]);</span></div><textarea data-torchlight-original="true" style="display: none !important;">use Filament\Facades\Filament;
Filament::registerNavigationGroups([
    'Shop',
    'Blog',
    'Settings',
<h2 id="active-icons"><a class="heading-anchor" href="#active-icons"><span class="heading-anchor-icon" aria-hidden="true">#</span></a>Active icons</h2>
<p>You may assign a navigation icon which will be displayed for active items using the <code>$activeNavigationIcon</code> property:</p>
<pre class="torchlight" style="background-color: #292D3E; --theme-selection-background: #00000080;" data-torchlight-processed="3449c9e5e332f1dbb81505cd739fbf3f"><code class="language-php"><!-- Syntax highlighted by torchlight.dev --><div class="line"><span style="color: #C792EA;">protected</span><span style="color: #A6ACCD;"> </span><span style="color: #C792EA;">static</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">?</span><span style="color: #F78C6C;">string</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">$</span><span style="color: #A6ACCD;">activeNavigationIcon </span><span style="color: #89DDFF;">=</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">'</span><span style="color: #C3E88D;">heroicon-s-document-text</span><span style="color: #89DDFF;">'</span><span style="color: #89DDFF;">;</span></div><textarea data-torchlight-original="true" style="display: none !important;">protected static ?string $activeNavigationIcon = 'heroicon-s-document-text';
<p>Alternatively, override the <code>getActiveNavigationIcon()</code> method:</p>
<pre class="torchlight" style="background-color: #292D3E; --theme-selection-background: #00000080;" data-torchlight-processed="3449c9e5e332f1dbb81505cd739fbf3f"><code class="language-php"><!-- Syntax highlighted by torchlight.dev --><div class="line"><span style="color: #C792EA;">protected</span><span style="color: #A6ACCD;"> </span><span style="color: #C792EA;">static</span><span style="color: #A6ACCD;"> </span><span style="color: #C792EA;">function</span><span style="color: #A6ACCD;"> </span><span style="color: #82AAFF;">getActiveNavigationIcon</span><span style="color: #89DDFF;">():</span><span style="color: #A6ACCD;"> </span><span style="color: #F78C6C;">string</span></div><div class="line"><span style="color: #89DDFF;">{</span></div><div class="line"><span style="color: #A6ACCD;">    </span><span style="color: #89DDFF;">return</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">'</span><span style="color: #C3E88D;">heroicon-s-document-text</span><span style="color: #89DDFF;">'</span><span style="color: #89DDFF;">;</span></div><div class="line"><span style="color: #89DDFF;">}</span></div><textarea data-torchlight-original="true" style="display: none !important;">protected static function getActiveNavigationIcon(): string
    return 'heroicon-s-document-text';
<h2 id="registering-custom-navigation-items"><a class="heading-anchor" href="#registering-custom-navigation-items"><span class="heading-anchor-icon" aria-hidden="true">#</span></a>Registering custom navigation items</h2>
<p>You may register custom navigation items by calling <code>Filament::registerNavigationItems()</code> from the <code>boot()</code> method of any service provider:</p>
<pre class="torchlight" style="background-color: #292D3E; --theme-selection-background: #00000080;" data-torchlight-processed="3449c9e5e332f1dbb81505cd739fbf3f"><code class="language-php"><!-- Syntax highlighted by torchlight.dev --><div class="line"><span style="color: #F78C6C;">use</span><span style="color: #FFCB6B;"> </span><span style="color: #A6ACCD;">Filament</span><span style="color: #89DDFF;">\</span><span style="color: #A6ACCD;">Facades</span><span style="color: #89DDFF;">\</span><span style="color: #A6ACCD;">Filament</span><span style="color: #89DDFF;">;</span></div><div class="line"><span style="color: #F78C6C;">use</span><span style="color: #FFCB6B;"> </span><span style="color: #A6ACCD;">Filament</span><span style="color: #89DDFF;">\</span><span style="color: #A6ACCD;">Navigation</span><span style="color: #89DDFF;">\</span><span style="color: #A6ACCD;">NavigationItem</span><span style="color: #89DDFF;">;</span></div><div class="line"> </div><div class="line"><span style="color: #FFCB6B;">Filament</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">serving</span><span style="color: #89DDFF;">(</span><span style="color: #C792EA;">function</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">()</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">{</span></div><div class="line"><span style="color: #A6ACCD;">    </span><span style="color: #FFCB6B;">Filament</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">registerNavigationItems</span><span style="color: #89DDFF;">([</span></div><div class="line"><span style="color: #A6ACCD;">        </span><span style="color: #FFCB6B;">NavigationItem</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">make</span><span style="color: #89DDFF;">(</span><span style="color: #89DDFF;">'</span><span style="color: #C3E88D;">Analytics</span><span style="color: #89DDFF;">'</span><span style="color: #89DDFF;">)</span></div><div class="line"><span style="color: #A6ACCD;">            </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">url</span><span style="color: #89DDFF;">(</span><span style="color: #89DDFF;">'</span><span style="color: #C3E88D;">https://filament.pirsch.io</span><span style="color: #89DDFF;">'</span><span style="color: #89DDFF;">,</span><span style="color: #A6ACCD;"> </span><span style="color: #FFCB6B;">shouldOpenInNewTab</span><span style="color: #89DDFF;">:</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">true)</span></div><div class="line"><span style="color: #A6ACCD;">            </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">icon</span><span style="color: #89DDFF;">(</span><span style="color: #89DDFF;">'</span><span style="color: #C3E88D;">heroicon-o-presentation-chart-line</span><span style="color: #89DDFF;">'</span><span style="color: #89DDFF;">)</span></div><div class="line"><span style="color: #A6ACCD;">            </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">activeIcon</span><span style="color: #89DDFF;">(</span><span style="color: #89DDFF;">'</span><span style="color: #C3E88D;">heroicon-s-presentation-chart-line</span><span style="color: #89DDFF;">'</span><span style="color: #89DDFF;">)</span></div><div class="line"><span style="color: #A6ACCD;">            </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">group</span><span style="color: #89DDFF;">(</span><span style="color: #89DDFF;">'</span><span style="color: #C3E88D;">Reports</span><span style="color: #89DDFF;">'</span><span style="color: #89DDFF;">)</span></div><div class="line"><span style="color: #A6ACCD;">            </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">sort</span><span style="color: #89DDFF;">(</span><span style="color: #F78C6C;">3</span><span style="color: #89DDFF;">),</span></div><div class="line"><span style="color: #A6ACCD;">    </span><span style="color: #89DDFF;">]);</span></div><div class="line"><span style="color: #89DDFF;">});</span></div><textarea data-torchlight-original="true" style="display: none !important;">use Filament\Facades\Filament;
use Filament\Navigation\NavigationItem;
Filament::serving(function () {
    Filament::registerNavigationItems([
        NavigationItem::make('Analytics')
            ->url('https://filament.pirsch.io', shouldOpenInNewTab: true)
            ->icon('heroicon-o-presentation-chart-line')
            ->activeIcon('heroicon-s-presentation-chart-line')
            ->group('Reports')
            ->sort(3),
<h2 id="conditionally-hiding-navigation-items"><a class="heading-anchor" href="#conditionally-hiding-navigation-items"><span class="heading-anchor-icon" aria-hidden="true">#</span></a>Conditionally hiding navigation items</h2>
<p>You can also conditionally hide a navigation item by using the <code>visible()</code> or <code>hidden()</code> methods, passing in a condition to check:</p>
<pre class="torchlight" style="background-color: #292D3E; --theme-selection-background: #00000080;" data-torchlight-processed="3449c9e5e332f1dbb81505cd739fbf3f"><code class="language-php"><!-- Syntax highlighted by torchlight.dev --><div class="line"><span style="color: #F78C6C;">use</span><span style="color: #FFCB6B;"> </span><span style="color: #A6ACCD;">Filament</span><span style="color: #89DDFF;">\</span><span style="color: #A6ACCD;">Navigation</span><span style="color: #89DDFF;">\</span><span style="color: #A6ACCD;">NavigationItem</span><span style="color: #89DDFF;">;</span></div><div class="line"> </div><div class="line"><span style="color: #FFCB6B;">NavigationItem</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">make</span><span style="color: #89DDFF;">(</span><span style="color: #89DDFF;">'</span><span style="color: #C3E88D;">Analytics</span><span style="color: #89DDFF;">'</span><span style="color: #89DDFF;">)</span></div><div class="line"><span style="color: #A6ACCD;">    </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">visible</span><span style="color: #89DDFF;">(</span><span style="color: #82AAFF;">auth</span><span style="color: #89DDFF;">()-></span><span style="color: #82AAFF;">user</span><span style="color: #89DDFF;">()-></span><span style="color: #82AAFF;">can</span><span style="color: #89DDFF;">(</span><span style="color: #89DDFF;">'</span><span style="color: #C3E88D;">view-analytics</span><span style="color: #89DDFF;">'</span><span style="color: #89DDFF;">))</span></div><div class="line"><span style="color: #89DDFF;">    </span><span style="color: #676E95;">// or</span></div><div class="line"><span style="color: #A6ACCD;">    </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">hidden</span><span style="color: #89DDFF;">(!</span><span style="color: #A6ACCD;"> </span><span style="color: #82AAFF;">auth</span><span style="color: #89DDFF;">()-></span><span style="color: #82AAFF;">user</span><span style="color: #89DDFF;">()-></span><span style="color: #82AAFF;">can</span><span style="color: #89DDFF;">(</span><span style="color: #89DDFF;">'</span><span style="color: #C3E88D;">view-analytics</span><span style="color: #89DDFF;">'</span><span style="color: #89DDFF;">)),</span></div><textarea data-torchlight-original="true" style="display: none !important;">use Filament\Navigation\NavigationItem;
NavigationItem::make('Analytics')
    ->visible(auth()->user()->can('view-analytics'))
    // or
    ->hidden(! auth()->user()->can('view-analytics')),
<h2 id="disabling-resource-or-page-navigation-items"><a class="heading-anchor" href="#disabling-resource-or-page-navigation-items"><span class="heading-anchor-icon" aria-hidden="true">#</span></a>Disabling resource or page navigation items</h2>
<p>To prevent resources or pages from showing up in navigation, you may use:</p>
<pre class="torchlight" style="background-color: #292D3E; --theme-selection-background: #00000080;" data-torchlight-processed="3449c9e5e332f1dbb81505cd739fbf3f"><code class="language-php"><!-- Syntax highlighted by torchlight.dev --><div class="line"><span style="color: #C792EA;">protected</span><span style="color: #A6ACCD;"> </span><span style="color: #C792EA;">static</span><span style="color: #A6ACCD;"> </span><span style="color: #F78C6C;">bool</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">$</span><span style="color: #A6ACCD;">shouldRegisterNavigation </span><span style="color: #89DDFF;">=</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">false;</span></div><textarea data-torchlight-original="true" style="display: none !important;">protected static bool $shouldRegisterNavigation = false;
<h2 id="advanced-navigation-customization"><a class="heading-anchor" href="#advanced-navigation-customization"><span class="heading-anchor-icon" aria-hidden="true">#</span></a>Advanced navigation customization</h2>
<p>The <code>Filament::navigation()</code> method which can be called from the <code>boot</code> method of a <code>ServiceProvider</code>:</p>
<pre class="torchlight" style="background-color: #292D3E; --theme-selection-background: #00000080;" data-torchlight-processed="3449c9e5e332f1dbb81505cd739fbf3f"><code class="language-php"><!-- Syntax highlighted by torchlight.dev --><div class="line"><span style="color: #F78C6C;">use</span><span style="color: #FFCB6B;"> </span><span style="color: #A6ACCD;">Filament</span><span style="color: #89DDFF;">\</span><span style="color: #A6ACCD;">Facades</span><span style="color: #89DDFF;">\</span><span style="color: #A6ACCD;">Filament</span><span style="color: #89DDFF;">;</span></div><div class="line"><span style="color: #F78C6C;">use</span><span style="color: #FFCB6B;"> </span><span style="color: #A6ACCD;">Filament</span><span style="color: #89DDFF;">\</span><span style="color: #A6ACCD;">Navigation</span><span style="color: #89DDFF;">\</span><span style="color: #A6ACCD;">NavigationBuilder</span><span style="color: #89DDFF;">;</span></div><div class="line"> </div><div class="line"><span style="color: #FFCB6B;">Filament</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">navigation</span><span style="color: #89DDFF;">(</span><span style="color: #C792EA;">function</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">(</span><span style="color: #FFCB6B;">NavigationBuilder</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">$</span><span style="color: #A6ACCD;">builder</span><span style="color: #89DDFF;">):</span><span style="color: #A6ACCD;"> </span><span style="color: #FFCB6B;">NavigationBuilder</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">{</span></div><div class="line"><span style="color: #A6ACCD;">    </span><span style="color: #89DDFF;">return</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">$</span><span style="color: #A6ACCD;">builder</span><span style="color: #89DDFF;">;</span></div><div class="line"><span style="color: #89DDFF;">});</span></div><textarea data-torchlight-original="true" style="display: none !important;">use Filament\Facades\Filament;
use Filament\Navigation\NavigationBuilder;
Filament::navigation(function (NavigationBuilder $builder): NavigationBuilder {
    return $builder;
<p>Once you add this callback function, Filament's default automatic navigation will be disabled and your sidebar will be empty. This is done on purpose, since this API is designed to give you complete control over the navigation.</p>
<p>To register navigation items, just call the <code>items()</code> method:</p>
<pre class="torchlight" style="background-color: #292D3E; --theme-selection-background: #00000080;" data-torchlight-processed="3449c9e5e332f1dbb81505cd739fbf3f"><code class="language-php"><!-- Syntax highlighted by torchlight.dev --><div class="line"><span style="color: #F78C6C;">use</span><span style="color: #FFCB6B;"> </span><span style="color: #A6ACCD;">App</span><span style="color: #89DDFF;">\</span><span style="color: #A6ACCD;">Filament</span><span style="color: #89DDFF;">\</span><span style="color: #A6ACCD;">Pages</span><span style="color: #89DDFF;">\</span><span style="color: #A6ACCD;">Settings</span><span style="color: #89DDFF;">;</span></div><div class="line"><span style="color: #F78C6C;">use</span><span style="color: #FFCB6B;"> </span><span style="color: #A6ACCD;">App</span><span style="color: #89DDFF;">\</span><span style="color: #A6ACCD;">Filament</span><span style="color: #89DDFF;">\</span><span style="color: #A6ACCD;">Resources</span><span style="color: #89DDFF;">\</span><span style="color: #A6ACCD;">UserResource</span><span style="color: #89DDFF;">;</span></div><div class="line"><span style="color: #F78C6C;">use</span><span style="color: #FFCB6B;"> </span><span style="color: #A6ACCD;">Filament</span><span style="color: #89DDFF;">\</span><span style="color: #A6ACCD;">Facades</span><span style="color: #89DDFF;">\</span><span style="color: #A6ACCD;">Filament</span><span style="color: #89DDFF;">;</span></div><div class="line"><span style="color: #F78C6C;">use</span><span style="color: #FFCB6B;"> </span><span style="color: #A6ACCD;">Filament</span><span style="color: #89DDFF;">\</span><span style="color: #A6ACCD;">Navigation</span><span style="color: #89DDFF;">\</span><span style="color: #A6ACCD;">NavigationBuilder</span><span style="color: #89DDFF;">;</span></div><div class="line"><span style="color: #F78C6C;">use</span><span style="color: #FFCB6B;"> </span><span style="color: #A6ACCD;">Filament</span><span style="color: #89DDFF;">\</span><span style="color: #A6ACCD;">Navigation</span><span style="color: #89DDFF;">\</span><span style="color: #A6ACCD;">NavigationItem</span><span style="color: #89DDFF;">;</span></div><div class="line"> </div><div class="line"><span style="color: #FFCB6B;">Filament</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">navigation</span><span style="color: #89DDFF;">(</span><span style="color: #C792EA;">function</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">(</span><span style="color: #FFCB6B;">NavigationBuilder</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">$</span><span style="color: #A6ACCD;">builder</span><span style="color: #89DDFF;">):</span><span style="color: #A6ACCD;"> </span><span style="color: #FFCB6B;">NavigationBuilder</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">{</span></div><div class="line"><span style="color: #A6ACCD;">    </span><span style="color: #89DDFF;">return</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">$</span><span style="color: #A6ACCD;">builder</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">items</span><span style="color: #89DDFF;">([</span></div><div class="line"><span style="color: #A6ACCD;">        </span><span style="color: #FFCB6B;">NavigationItem</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">make</span><span style="color: #89DDFF;">(</span><span style="color: #89DDFF;">'</span><span style="color: #C3E88D;">Dashboard</span><span style="color: #89DDFF;">'</span><span style="color: #89DDFF;">)</span></div><div class="line"><span style="color: #A6ACCD;">            </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">icon</span><span style="color: #89DDFF;">(</span><span style="color: #89DDFF;">'</span><span style="color: #C3E88D;">heroicon-o-home</span><span style="color: #89DDFF;">'</span><span style="color: #89DDFF;">)</span></div><div class="line"><span style="color: #A6ACCD;">            </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">activeIcon</span><span style="color: #89DDFF;">(</span><span style="color: #89DDFF;">'</span><span style="color: #C3E88D;">heroicon-s-home</span><span style="color: #89DDFF;">'</span><span style="color: #89DDFF;">)</span></div><div class="line"><span style="color: #A6ACCD;">            </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">isActiveWhen</span><span style="color: #89DDFF;">(</span><span style="color: #C792EA;">fn</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">():</span><span style="color: #A6ACCD;"> </span><span style="color: #F78C6C;">bool</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">=></span><span style="color: #A6ACCD;"> </span><span style="color: #82AAFF;">request</span><span style="color: #89DDFF;">()-></span><span style="color: #82AAFF;">routeIs</span><span style="color: #89DDFF;">(</span><span style="color: #89DDFF;">'</span><span style="color: #C3E88D;">filament.pages.dashboard</span><span style="color: #89DDFF;">'</span><span style="color: #89DDFF;">))</span></div><div class="line"><span style="color: #A6ACCD;">            </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">url</span><span style="color: #89DDFF;">(</span><span style="color: #82AAFF;">route</span><span style="color: #89DDFF;">(</span><span style="color: #89DDFF;">'</span><span style="color: #C3E88D;">filament.pages.dashboard</span><span style="color: #89DDFF;">'</span><span style="color: #89DDFF;">)),</span></div><div class="line"><span style="color: #A6ACCD;">        </span><span style="color: #89DDFF;">...</span><span style="color: #FFCB6B;">UserResource</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">getNavigationItems</span><span style="color: #89DDFF;">(),</span></div><div class="line"><span style="color: #A6ACCD;">        </span><span style="color: #89DDFF;">...</span><span style="color: #FFCB6B;">Settings</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">getNavigationItems</span><span style="color: #89DDFF;">(),</span></div><div class="line"><span style="color: #A6ACCD;">    </span><span style="color: #89DDFF;">]);</span></div><div class="line"><span style="color: #89DDFF;">});</span></div><textarea data-torchlight-original="true" style="display: none !important;">use App\Filament\Pages\Settings;
use App\Filament\Resources\UserResource;
use Filament\Facades\Filament;
use Filament\Navigation\NavigationBuilder;
use Filament\Navigation\NavigationItem;
Filament::navigation(function (NavigationBuilder $builder): NavigationBuilder {
    return $builder->items([
        NavigationItem::make('Dashboard')
            ->icon('heroicon-o-home')
            ->activeIcon('heroicon-s-home')
            ->isActiveWhen(fn (): bool => request()->routeIs('filament.pages.dashboard'))
            ->url(route('filament.pages.dashboard')),
        ...UserResource::getNavigationItems(),
        ...Settings::getNavigationItems(),
<p>If you want to register groups, you can call the <code>groups()</code> method:</p>
<pre class="torchlight" style="background-color: #292D3E; --theme-selection-background: #00000080;" data-torchlight-processed="3449c9e5e332f1dbb81505cd739fbf3f"><code class="language-php"><!-- Syntax highlighted by torchlight.dev --><div class="line"><span style="color: #F78C6C;">use</span><span style="color: #FFCB6B;"> </span><span style="color: #A6ACCD;">App</span><span style="color: #89DDFF;">\</span><span style="color: #A6ACCD;">Filament</span><span style="color: #89DDFF;">\</span><span style="color: #A6ACCD;">Pages</span><span style="color: #89DDFF;">\</span><span style="color: #A6ACCD;">HomePageSettings</span><span style="color: #89DDFF;">;</span></div><div class="line"><span style="color: #F78C6C;">use</span><span style="color: #FFCB6B;"> </span><span style="color: #A6ACCD;">App</span><span style="color: #89DDFF;">\</span><span style="color: #A6ACCD;">Filament</span><span style="color: #89DDFF;">\</span><span style="color: #A6ACCD;">Resources</span><span style="color: #89DDFF;">\</span><span style="color: #A6ACCD;">CategoryResource</span><span style="color: #89DDFF;">;</span></div><div class="line"><span style="color: #F78C6C;">use</span><span style="color: #FFCB6B;"> </span><span style="color: #A6ACCD;">App</span><span style="color: #89DDFF;">\</span><span style="color: #A6ACCD;">Filament</span><span style="color: #89DDFF;">\</span><span style="color: #A6ACCD;">Resources</span><span style="color: #89DDFF;">\</span><span style="color: #A6ACCD;">PageResource</span><span style="color: #89DDFF;">;</span></div><div class="line"><span style="color: #F78C6C;">use</span><span style="color: #FFCB6B;"> </span><span style="color: #A6ACCD;">Filament</span><span style="color: #89DDFF;">\</span><span style="color: #A6ACCD;">Facades</span><span style="color: #89DDFF;">\</span><span style="color: #A6ACCD;">Filament</span><span style="color: #89DDFF;">;</span></div><div class="line"><span style="color: #F78C6C;">use</span><span style="color: #FFCB6B;"> </span><span style="color: #A6ACCD;">Filament</span><span style="color: #89DDFF;">\</span><span style="color: #A6ACCD;">Navigation</span><span style="color: #89DDFF;">\</span><span style="color: #A6ACCD;">NavigationBuilder</span><span style="color: #89DDFF;">;</span></div><div class="line"><span style="color: #F78C6C;">use</span><span style="color: #FFCB6B;"> </span><span style="color: #A6ACCD;">Filament</span><span style="color: #89DDFF;">\</span><span style="color: #A6ACCD;">Navigation</span><span style="color: #89DDFF;">\</span><span style="color: #A6ACCD;">NavigationGroup</span><span style="color: #89DDFF;">;</span></div><div class="line"> </div><div class="line"><span style="color: #FFCB6B;">Filament</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">navigation</span><span style="color: #89DDFF;">(</span><span style="color: #C792EA;">function</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">(</span><span style="color: #FFCB6B;">NavigationBuilder</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">$</span><span style="color: #A6ACCD;">builder</span><span style="color: #89DDFF;">):</span><span style="color: #A6ACCD;"> </span><span style="color: #FFCB6B;">NavigationBuilder</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">{</span></div><div class="line"><span style="color: #A6ACCD;">    </span><span style="color: #89DDFF;">return</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">$</span><span style="color: #A6ACCD;">builder</span></div><div class="line"><span style="color: #A6ACCD;">        </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">groups</span><span style="color: #89DDFF;">([</span></div><div class="line"><span style="color: #A6ACCD;">            </span><span style="color: #FFCB6B;">NavigationGroup</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">make</span><span style="color: #89DDFF;">(</span><span style="color: #89DDFF;">'</span><span style="color: #C3E88D;">Website</span><span style="color: #89DDFF;">'</span><span style="color: #89DDFF;">)</span></div><div class="line"><span style="color: #A6ACCD;">                </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">items</span><span style="color: #89DDFF;">([</span></div><div class="line"><span style="color: #A6ACCD;">                    </span><span style="color: #89DDFF;">...</span><span style="color: #FFCB6B;">PageResource</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">getNavigationItems</span><span style="color: #89DDFF;">(),</span></div><div class="line"><span style="color: #A6ACCD;">                    </span><span style="color: #89DDFF;">...</span><span style="color: #FFCB6B;">CategoryResource</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">getNavigationItems</span><span style="color: #89DDFF;">(),</span></div><div class="line"><span style="color: #A6ACCD;">                    </span><span style="color: #89DDFF;">...</span><span style="color: #FFCB6B;">HomePageSettings</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">getNavigationItems</span><span style="color: #89DDFF;">(),</span></div><div class="line"><span style="color: #A6ACCD;">                </span><span style="color: #89DDFF;">]),</span></div><div class="line"><span style="color: #A6ACCD;">        </span><span style="color: #89DDFF;">]);</span></div><div class="line"><span style="color: #89DDFF;">});</span></div><textarea data-torchlight-original="true" style="display: none !important;">use App\Filament\Pages\HomePageSettings;
use App\Filament\Resources\CategoryResource;
use App\Filament\Resources\PageResource;
use Filament\Facades\Filament;
use Filament\Navigation\NavigationBuilder;
use Filament\Navigation\NavigationGroup;
Filament::navigation(function (NavigationBuilder $builder): NavigationBuilder {
    return $builder
        ->groups([
            NavigationGroup::make('Website')
                ->items([
                    ...PageResource::getNavigationItems(),
                    ...CategoryResource::getNavigationItems(),
                    ...HomePageSettings::getNavigationItems(),
<h2 id="customizing-the-user-menu"><a class="heading-anchor" href="#customizing-the-user-menu"><span class="heading-anchor-icon" aria-hidden="true">#</span></a>Customizing the user menu</h2>
<p>The user menu is featured in the top right corner of the admin layout. It's fully customizable.</p>
<p>To register new items to the user menu, you should use a service provider:</p>
<pre class="torchlight" style="background-color: #292D3E; --theme-selection-background: #00000080;" data-torchlight-processed="3449c9e5e332f1dbb81505cd739fbf3f"><code class="language-php"><!-- Syntax highlighted by torchlight.dev --><div class="line"><span style="color: #F78C6C;">use</span><span style="color: #FFCB6B;"> </span><span style="color: #A6ACCD;">Filament</span><span style="color: #89DDFF;">\</span><span style="color: #A6ACCD;">Facades</span><span style="color: #89DDFF;">\</span><span style="color: #A6ACCD;">Filament</span><span style="color: #89DDFF;">;</span></div><div class="line"><span style="color: #F78C6C;">use</span><span style="color: #FFCB6B;"> </span><span style="color: #A6ACCD;">Filament</span><span style="color: #89DDFF;">\</span><span style="color: #A6ACCD;">Navigation</span><span style="color: #89DDFF;">\</span><span style="color: #A6ACCD;">UserMenuItem</span><span style="color: #89DDFF;">;</span></div><div class="line"> </div><div class="line"><span style="color: #FFCB6B;">Filament</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">serving</span><span style="color: #89DDFF;">(</span><span style="color: #C792EA;">function</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">()</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">{</span></div><div class="line"><span style="color: #A6ACCD;">    </span><span style="color: #FFCB6B;">Filament</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">registerUserMenuItems</span><span style="color: #89DDFF;">([</span></div><div class="line"><span style="color: #A6ACCD;">        </span><span style="color: #FFCB6B;">UserMenuItem</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">make</span><span style="color: #89DDFF;">()</span></div><div class="line"><span style="color: #A6ACCD;">            </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">label</span><span style="color: #89DDFF;">(</span><span style="color: #89DDFF;">'</span><span style="color: #C3E88D;">Settings</span><span style="color: #89DDFF;">'</span><span style="color: #89DDFF;">)</span></div><div class="line"><span style="color: #A6ACCD;">            </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">url</span><span style="color: #89DDFF;">(</span><span style="color: #82AAFF;">route</span><span style="color: #89DDFF;">(</span><span style="color: #89DDFF;">'</span><span style="color: #C3E88D;">filament.pages.settings</span><span style="color: #89DDFF;">'</span><span style="color: #89DDFF;">))</span></div><div class="line"><span style="color: #A6ACCD;">            </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">icon</span><span style="color: #89DDFF;">(</span><span style="color: #89DDFF;">'</span><span style="color: #C3E88D;">heroicon-s-cog</span><span style="color: #89DDFF;">'</span><span style="color: #89DDFF;">),</span></div><div class="line"><span style="color: #89DDFF;">        </span><span style="color: #676E95;">// ...</span></div><div class="line"><span style="color: #A6ACCD;">    </span><span style="color: #89DDFF;">]);</span></div><div class="line"><span style="color: #89DDFF;">});</span></div><textarea data-torchlight-original="true" style="display: none !important;">use Filament\Facades\Filament;
use Filament\Navigation\UserMenuItem;
Filament::serving(function () {
    Filament::registerUserMenuItems([
        UserMenuItem::make()
            ->label('Settings')
            ->url(route('filament.pages.settings'))
            ->icon('heroicon-s-cog'),
        // ...
<h3 id="customizing-the-account-link"><a class="heading-anchor" href="#customizing-the-account-link"><span class="heading-anchor-icon" aria-hidden="true">#</span></a>Customizing the account link</h3>
<p>To customize the user account link at the start of the user menu, register a new item with the <code>account</code> array key:</p>
<pre class="torchlight" style="background-color: #292D3E; --theme-selection-background: #00000080;" data-torchlight-processed="3449c9e5e332f1dbb81505cd739fbf3f"><code class="language-php"><!-- Syntax highlighted by torchlight.dev --><div class="line"><span style="color: #F78C6C;">use</span><span style="color: #FFCB6B;"> </span><span style="color: #A6ACCD;">Filament</span><span style="color: #89DDFF;">\</span><span style="color: #A6ACCD;">Facades</span><span style="color: #89DDFF;">\</span><span style="color: #A6ACCD;">Filament</span><span style="color: #89DDFF;">;</span></div><div class="line"><span style="color: #F78C6C;">use</span><span style="color: #FFCB6B;"> </span><span style="color: #A6ACCD;">Filament</span><span style="color: #89DDFF;">\</span><span style="color: #A6ACCD;">Navigation</span><span style="color: #89DDFF;">\</span><span style="color: #A6ACCD;">UserMenuItem</span><span style="color: #89DDFF;">;</span></div><div class="line"> </div><div class="line"><span style="color: #FFCB6B;">Filament</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">serving</span><span style="color: #89DDFF;">(</span><span style="color: #C792EA;">function</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">()</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">{</span></div><div class="line"><span style="color: #A6ACCD;">    </span><span style="color: #FFCB6B;">Filament</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">registerUserMenuItems</span><span style="color: #89DDFF;">([</span></div><div class="line"><span style="color: #A6ACCD;">        </span><span style="color: #89DDFF;">'</span><span style="color: #C3E88D;">account</span><span style="color: #89DDFF;">'</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">=></span><span style="color: #A6ACCD;"> </span><span style="color: #FFCB6B;">UserMenuItem</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">make</span><span style="color: #89DDFF;">()-></span><span style="color: #82AAFF;">url</span><span style="color: #89DDFF;">(</span><span style="color: #82AAFF;">route</span><span style="color: #89DDFF;">(</span><span style="color: #89DDFF;">'</span><span style="color: #C3E88D;">filament.pages.account</span><span style="color: #89DDFF;">'</span><span style="color: #89DDFF;">)),</span></div><div class="line"><span style="color: #89DDFF;">        </span><span style="color: #676E95;">// ...</span></div><div class="line"><span style="color: #A6ACCD;">    </span><span style="color: #89DDFF;">]);</span></div><div class="line"><span style="color: #89DDFF;">});</span></div><textarea data-torchlight-original="true" style="display: none !important;">use Filament\Facades\Filament;
use Filament\Navigation\UserMenuItem;
Filament::serving(function () {
    Filament::registerUserMenuItems([
        'account' => UserMenuItem::make()->url(route('filament.pages.account')),
        // ...
<h3 id="customizing-the-logout-link"><a class="heading-anchor" href="#customizing-the-logout-link"><span class="heading-anchor-icon" aria-hidden="true">#</span></a>Customizing the logout link</h3>
<p>To customize the user logout link at the end of the user menu, register a new item with the <code>logout</code> array key:</p>
<pre class="torchlight" style="background-color: #292D3E; --theme-selection-background: #00000080;" data-torchlight-processed="3449c9e5e332f1dbb81505cd739fbf3f"><code class="language-php"><!-- Syntax highlighted by torchlight.dev --><div class="line"><span style="color: #F78C6C;">use</span><span style="color: #FFCB6B;"> </span><span style="color: #A6ACCD;">Filament</span><span style="color: #89DDFF;">\</span><span style="color: #A6ACCD;">Facades</span><span style="color: #89DDFF;">\</span><span style="color: #A6ACCD;">Filament</span><span style="color: #89DDFF;">;</span></div><div class="line"><span style="color: #F78C6C;">use</span><span style="color: #FFCB6B;"> </span><span style="color: #A6ACCD;">Filament</span><span style="color: #89DDFF;">\</span><span style="color: #A6ACCD;">Navigation</span><span style="color: #89DDFF;">\</span><span style="color: #A6ACCD;">UserMenuItem</span><span style="color: #89DDFF;">;</span></div><div class="line"> </div><div class="line"><span style="color: #FFCB6B;">Filament</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">serving</span><span style="color: #89DDFF;">(</span><span style="color: #C792EA;">function</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">()</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">{</span></div><div class="line"><span style="color: #A6ACCD;">    </span><span style="color: #FFCB6B;">Filament</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">registerUserMenuItems</span><span style="color: #89DDFF;">([</span></div><div class="line"><span style="color: #89DDFF;">        </span><span style="color: #676E95;">// ...</span></div><div class="line"><span style="color: #A6ACCD;">        </span><span style="color: #89DDFF;">'</span><span style="color: #C3E88D;">logout</span><span style="color: #89DDFF;">'</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">=></span><span style="color: #A6ACCD;"> </span><span style="color: #FFCB6B;">UserMenuItem</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">make</span><span style="color: #89DDFF;">()-></span><span style="color: #82AAFF;">label</span><span style="color: #89DDFF;">(</span><span style="color: #89DDFF;">'</span><span style="color: #C3E88D;">Log out</span><span style="color: #89DDFF;">'</span><span style="color: #89DDFF;">),</span></div><div class="line"><span style="color: #A6ACCD;">    </span><span style="color: #89DDFF;">]);</span></div><div class="line"><span style="color: #89DDFF;">});</span></div><textarea data-torchlight-original="true" style="display: none !important;">use Filament\Facades\Filament;
use Filament\Navigation\UserMenuItem;
Filament::serving(function () {
    Filament::registerUserMenuItems([
        // ...
        'logout' => UserMenuItem::make()->label('Log out'),

Still need help? Join our Discord community or open a GitHub discussion