> ## Documentation Index
> Fetch the complete documentation index at: https://filament-34a8cf01.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Overview
> [!WARNING]
>
> You are currently viewing the documentation for Filament 4.x, which is a previous version of Filament.
>
> Looking for the current stable version? Visit the [5.x documentation](https://filament-34a8cf01.mintlify.site/5.x/navigation/overview.md).
## Introduction
By default, Filament will register navigation items for each of your [resources](https://filament-34a8cf01.mintlify.site/4.x/resources/overview.md), [custom pages](https://filament-34a8cf01.mintlify.site/4.x/navigation/custom-pages.md), and [clusters](https://filament-34a8cf01.mintlify.site/4.x/navigation/clusters.md). These classes contain static properties and methods that you can override, to configure that navigation item.
If you're looking to add a second layer of navigation to your app, you can use [clusters](https://filament-34a8cf01.mintlify.site/4.x/navigation/clusters.md). These are useful for grouping resources and pages together.
## Customizing a navigation item's label
By default, the navigation label is generated from the resource or page's name. You may customize this using the `$navigationLabel` property:
```php theme={"theme":"gruvbox-dark-hard"}
protected static ?string $navigationLabel = 'Custom Navigation Label';
```
Alternatively, you may override the `getNavigationLabel()` method:
```php theme={"theme":"gruvbox-dark-hard"}
public static function getNavigationLabel(): string
{
return 'Custom Navigation Label';
}
```
### Rendering HTML in navigation item labels
The `$navigationLabel` property remains a string. You may return an `Htmlable` object, such as an `HtmlString`, from `getNavigationLabel()` to render HTML in the label:
```php theme={"theme":"gruvbox-dark-hard"}
use Illuminate\Contracts\Support\Htmlable;
use Illuminate\Support\HtmlString;
public static function getNavigationLabel(): string | Htmlable
{
return new HtmlString('' . e(__('navigation.reports')) . '');
}
```
The `make()` and `label()` methods on `NavigationItem` also accept a string, an `Htmlable` object, or a closure returning either:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Navigation\NavigationItem;
use Illuminate\Support\HtmlString;
NavigationItem::make('Reports')
->label(static fn (): HtmlString => new HtmlString('' . e(__('navigation.reports')) . ''))
->url('/reports');
```
Strings are rendered as text, including in collapsed sidebar tooltips. Only `Htmlable` labels are rendered as trusted HTML. You must escape any dynamic content using `e()` before including it in an `HtmlString`.
## Customizing a navigation item's icon
To customize a navigation item's [icon](https://filament-34a8cf01.mintlify.site/4.x/styling/icons.md), you may override the `$navigationIcon` property on the [resource](https://filament-34a8cf01.mintlify.site/4.x/resources/overview.md) or [page](https://filament-34a8cf01.mintlify.site/4.x/navigation/custom-pages.md) class:
```php theme={"theme":"gruvbox-dark-hard"}
use BackedEnum;
use Filament\Support\Icons\Heroicon;
protected static string | BackedEnum | null $navigationIcon = Heroicon::OutlinedDocumentText;
```
Loading preview
If you set `$navigationIcon = null` on all items within the same navigation group, those items will be joined with a vertical bar below the group label.
### Switching navigation item icon when it is active
You may assign a navigation [icon](https://filament-34a8cf01.mintlify.site/4.x/styling/icons.md) which will only be used for active items using the `$activeNavigationIcon` property:
```php theme={"theme":"gruvbox-dark-hard"}
use BackedEnum;
use Filament\Support\Icons\Heroicon;
protected static string | BackedEnum | null $activeNavigationIcon = Heroicon::OutlinedDocumentText;
```
Loading preview
## Sorting navigation items
By default, navigation items are sorted alphabetically. You may customize this using the `$navigationSort` property:
```php theme={"theme":"gruvbox-dark-hard"}
protected static ?int $navigationSort = 3;
```
Now, navigation items with a lower sort value will appear before those with a higher sort value - the order is ascending.
Loading preview
## Adding a badge to a navigation item
To add a badge next to the navigation item, you can use the `getNavigationBadge()` method and return the content of the badge:
```php theme={"theme":"gruvbox-dark-hard"}
public static function getNavigationBadge(): ?string
{
return static::getModel()::count();
}
```
Loading preview
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 theme={"theme":"gruvbox-dark-hard"}
public static function getNavigationBadgeColor(): ?string
{
return static::getModel()::count() > 10 ? 'warning' : 'primary';
}
```
Loading preview
A custom tooltip for the navigation badge can be set in `$navigationBadgeTooltip`:
```php theme={"theme":"gruvbox-dark-hard"}
protected static ?string $navigationBadgeTooltip = 'The number of users';
```
Or it can be returned from `getNavigationBadgeTooltip()`:
```php theme={"theme":"gruvbox-dark-hard"}
public static function getNavigationBadgeTooltip(): ?string
{
return 'The number of users';
}
```
Loading preview
## Grouping navigation items
You may group navigation items by specifying a `$navigationGroup` property on a [resource](https://filament-34a8cf01.mintlify.site/4.x/resources/overview.md) and [custom page](https://filament-34a8cf01.mintlify.site/4.x/navigation/custom-pages.md):
```php theme={"theme":"gruvbox-dark-hard"}
use UnitEnum;
protected static string | UnitEnum | null $navigationGroup = 'Settings';
```
Loading preview
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 start of the navigation.
### Grouping navigation items under other items
You may group navigation items as children of other items by setting the `$navigationParentItem` property. You may reference the parent item either by its page or resource class, or by its label:
```php theme={"theme":"gruvbox-dark-hard"}
use App\Filament\Resources\Notifications\NotificationResource;
use UnitEnum;
protected static ?string $navigationParentItem = NotificationResource::class;
protected static string | UnitEnum | null $navigationGroup = 'Settings';
```
Alternatively, you may reference the parent by its label:
```php theme={"theme":"gruvbox-dark-hard"}
use UnitEnum;
protected static ?string $navigationParentItem = 'Notifications';
protected static string | UnitEnum | null $navigationGroup = 'Settings';
```
You may also use the `getNavigationParentItem()` method to determine the parent dynamically:
```php theme={"theme":"gruvbox-dark-hard"}
use App\Filament\Resources\Notifications\NotificationResource;
public static function getNavigationParentItem(): ?string
{
return NotificationResource::class;
}
```
Alternatively, you may return the parent's label:
```php theme={"theme":"gruvbox-dark-hard"}
public static function getNavigationParentItem(): ?string
{
return __('filament/navigation.groups.settings.items.notifications');
}
```
The parent and child items must belong to the same navigation group. If the parent item has a navigation group, that group must also be defined on the child, otherwise the correct parent item cannot be identified. This applies whether you reference the parent by its class or by its label.
> [!TIP]
>
> If you're reaching for a third level of navigation like this, you should consider using [clusters](https://filament-34a8cf01.mintlify.site/4.x/navigation/clusters.md) instead, which are a logical grouping of resources and custom pages, which can share their own separate navigation.
### Customizing navigation groups
You may customize navigation groups by calling `navigationGroups()` in the [configuration](https://filament-34a8cf01.mintlify.site/4.x/panel-configuration.md), and passing `NavigationGroup` objects in order:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Navigation\NavigationGroup;
use Filament\Panel;
use Filament\Support\Icons\Heroicon;
public function panel(Panel $panel): Panel
{
return $panel
// ...
->navigationGroups([
NavigationGroup::make()
->label('Shop')
->icon(Heroicon::OutlinedShoppingCart),
NavigationGroup::make()
->label('Blog')
->icon(Heroicon::OutlinedPencil),
NavigationGroup::make()
->label(fn (): string => __('navigation.settings'))
->icon(Heroicon::OutlinedCog6Tooth)
->collapsed(),
]);
}
```
In this example, we pass in a custom `icon()` for the groups, and make one `collapsed()` by default.
#### Rendering HTML in navigation group labels
The `make()` and `label()` methods on `NavigationGroup` accept a string, an `Htmlable` object, or a closure returning either. To render HTML in a group label, you may pass an `HtmlString`:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Navigation\NavigationGroup;
use Filament\Panel;
use Illuminate\Support\HtmlString;
public function panel(Panel $panel): Panel
{
return $panel
// ...
->navigationGroups([
'Shop' => NavigationGroup::make(new HtmlString('' . e(__('navigation.shop')) . '')),
]);
}
```
The array key, `Shop`, identifies the group, while the `HtmlString` controls its display label. Keep the `$navigationGroup` property on your resources and pages set to the string identifier (`'Shop'` in this example) or a `UnitEnum` case, not an `Htmlable` object. For HTML labels, use keyed `navigationGroups()` entries so the display markup is not used as the group identifier.
As with navigation item labels, strings are rendered as text, including in tooltips, while `Htmlable` labels are rendered as trusted HTML. Escape dynamic content using `e()`.
#### Ordering navigation groups
By using `navigationGroups()`, you are defining a new order for the navigation groups. If you just want to reorder the groups and not define an entire `NavigationGroup` object, you may just pass the labels of the groups in the new order:
```php theme={"theme":"gruvbox-dark-hard"}
$panel
->navigationGroups([
'Shop',
'Blog',
'Settings',
])
```
#### Making navigation groups not collapsible
By default, navigation groups are collapsible.
Loading preview
You may disable this behavior by calling `collapsible(false)` on the `NavigationGroup` object:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Navigation\NavigationGroup;
use Filament\Support\Icons\Heroicon;
NavigationGroup::make()
->label('Settings')
->icon(Heroicon::OutlinedCog6Tooth)
->collapsible(false);
```
Loading preview
Or, you can do it globally for all groups in the [configuration](https://filament-34a8cf01.mintlify.site/4.x/panel-configuration.md):
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Panel;
public function panel(Panel $panel): Panel
{
return $panel
// ...
->collapsibleNavigationGroups(false);
}
```
#### Adding extra HTML attributes to navigation groups
You can pass extra HTML attributes to the navigation group, which will be merged onto the outer DOM element. Pass an array of attributes to the `extraSidebarAttributes()` or `extraTopbarAttributes()` method, where the key is the attribute name and the value is the attribute value:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Navigation\NavigationGroup;
NavigationGroup::make()
->extraSidebarAttributes(['class' => 'featured-sidebar-group'])
->extraTopbarAttributes(['class' => 'featured-topbar-group'])
```
The `extraSidebarAttributes()` will be applied to navigation group elements contained in the sidebar, and the `extraTopbarAttributes()` will only be applied to topbar navigation group dropdowns when using [top navigation](#using-top-navigation).
### Registering navigation groups with an enum
You can use an enum class to register navigation groups, which allows you to control their labels, icons, and order in a single place, without needing to register them in the [configuration](https://filament-34a8cf01.mintlify.site/4.x/panel-configuration.md).
To do this, you can create an enum class with cases for each group:
```php theme={"theme":"gruvbox-dark-hard"}
enum NavigationGroup
{
case Shop;
case Blog;
case Settings;
}
```
The order that the cases are defined in will control the order of the navigation groups.
To use an enum navigation group for a resource or custom page, you can set the `$navigationGroup` property to the enum case:
```php theme={"theme":"gruvbox-dark-hard"}
protected static string | UnitEnum | null $navigationGroup = NavigationGroup::Shop;
```
You can also implement the `HasLabel` interface on the enum class, to define a custom label for each group:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Support\Contracts\HasLabel;
enum NavigationGroup implements HasLabel
{
case Shop;
case Blog;
case Settings;
public function getLabel(): string
{
return match ($this) {
self::Shop => __('navigation-groups.shop'),
self::Blog => __('navigation-groups.blog'),
self::Settings => __('navigation-groups.settings'),
};
}
}
```
You can also implement the `HasIcon` interface on the enum class, to define a custom icon for each group:
```php theme={"theme":"gruvbox-dark-hard"}
use BackedEnum;
use Filament\Support\Contracts\HasIcon;
use Filament\Support\Icons\Heroicon;
use Illuminate\Contracts\Support\Htmlable;
enum NavigationGroup implements HasIcon
{
case Shop;
case Blog;
case Settings;
public function getIcon(): string | BackedEnum | Htmlable | null
{
return match ($this) {
self::Shop => Heroicon::OutlinedShoppingCart,
self::Blog => Heroicon::OutlinedPencil,
self::Settings => Heroicon::OutlinedCog6Tooth,
};
}
}
```
## Collapsible sidebar on desktop
To make the sidebar collapsible on desktop as well as mobile, you can use the [configuration](https://filament-34a8cf01.mintlify.site/4.x/panel-configuration.md):
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Panel;
public function panel(Panel $panel): Panel
{
return $panel
// ...
->sidebarCollapsibleOnDesktop();
}
```
Loading preview
By default, when you collapse the sidebar on desktop, the navigation icons still show. You can fully collapse the sidebar using the `sidebarFullyCollapsibleOnDesktop()` method:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Panel;
public function panel(Panel $panel): Panel
{
return $panel
// ...
->sidebarFullyCollapsibleOnDesktop();
}
```
Loading preview
### Navigation groups in a collapsible sidebar on desktop
> [!NOTE]
>
> This section only applies to `sidebarCollapsibleOnDesktop()`, not `sidebarFullyCollapsibleOnDesktop()`, since the fully collapsible UI just hides the entire sidebar instead of changing its design.
When using a collapsible sidebar on desktop, you will also often be using [navigation groups](#grouping-navigation-items). By default, the labels of each navigation group will be hidden when the sidebar is collapsed, since there is no space to display them. Even if the navigation group itself is [collapsible](#making-navigation-groups-not-collapsible), all items will still be visible in the collapsed sidebar, since there is no group label to click on to expand the group.
These issues can be solved, to achieve a very minimal sidebar design, by [passing an `icon()`](#customizing-navigation-groups) to the navigation group objects. When an icon is defined, the icon will be displayed in the collapsed sidebar instead of the items at all times. When the icon is clicked, a dropdown will open to the side of the icon, revealing the items in the group.
When passing an icon to a navigation group, even if the items also have icons, the expanded sidebar UI will not show the item icons. This is to keep the navigation hierarchy clear, and the design minimal. However, the icons for the items will be shown in the collapsed sidebar's dropdowns though, since the hierarchy is already clear from the fact that the dropdown is open.
Loading preview
## Registering custom navigation items
To register new navigation items, you can use the [configuration](https://filament-34a8cf01.mintlify.site/4.x/panel-configuration.md):
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Navigation\NavigationItem;
use Filament\Pages\Dashboard;
use Filament\Panel;
use Filament\Support\Icons\Heroicon;
use function Filament\Support\original_request;
public function panel(Panel $panel): Panel
{
return $panel
// ...
->navigationItems([
NavigationItem::make('Analytics')
->url('https://filament.pirsch.io', shouldOpenInNewTab: true)
->icon(Heroicon::OutlinedPresentationChartLine)
->group('Reports')
->sort(3),
NavigationItem::make('dashboard')
->label(fn (): string => __('filament-panels::pages/dashboard.title'))
->url(fn (): string => Dashboard::getUrl())
->isActiveWhen(fn () => original_request()->routeIs('filament.admin.pages.dashboard')),
// ...
]);
}
```
## Conditionally hiding navigation items
You can also conditionally hide a navigation item by using the `visible()` or `hidden()` methods, passing in a condition to check:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Navigation\NavigationItem;
NavigationItem::make('Analytics')
->visible(fn(): bool => auth()->user()->can('view-analytics'))
// or
->hidden(fn(): bool => ! auth()->user()->can('view-analytics')),
```
## Disabling resource or page navigation items
To prevent resources or pages from showing up in navigation, you may use:
```php theme={"theme":"gruvbox-dark-hard"}
protected static bool $shouldRegisterNavigation = false;
```
Or, you may override the `shouldRegisterNavigation()` method:
```php theme={"theme":"gruvbox-dark-hard"}
public static function shouldRegisterNavigation(): bool
{
return false;
}
```
> [!CAUTION]
>
> `shouldRegisterNavigation()` only hides the link from the sidebar — it does not prevent a user from typing the URL directly. To actually restrict access, use [resource authorization](../resources#authorization) or [page authorization](https://filament-34a8cf01.mintlify.site/4.x/navigation/custom-pages.md#authorization).
## Using top navigation
By default, Filament will use a sidebar navigation. You may use a top navigation instead by using the [configuration](https://filament-34a8cf01.mintlify.site/4.x/panel-configuration.md):
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Panel;
public function panel(Panel $panel): Panel
{
return $panel
// ...
->topNavigation();
}
```
Loading preview
## Customizing the width of the sidebar
You can customize the width of the sidebar by passing it to the `sidebarWidth()` method in the [configuration](https://filament-34a8cf01.mintlify.site/4.x/panel-configuration.md):
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Panel;
public function panel(Panel $panel): Panel
{
return $panel
// ...
->sidebarWidth('40rem');
}
```
Loading preview
Additionally, if you are using the `sidebarCollapsibleOnDesktop()` method, you can customize width of the collapsed icons by using the `collapsedSidebarWidth()` method in the [configuration](https://filament-34a8cf01.mintlify.site/4.x/panel-configuration.md):
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Panel;
public function panel(Panel $panel): Panel
{
return $panel
// ...
->sidebarCollapsibleOnDesktop()
->collapsedSidebarWidth('9rem');
}
```
## Advanced navigation customization
The `navigation()` method can be called from the [configuration](https://filament-34a8cf01.mintlify.site/4.x/panel-configuration.md). It allows you to build a custom navigation that overrides Filament's automatically generated items. This API is designed to give you complete control over the navigation.
### Registering custom navigation items
To register navigation items, call the `items()` method:
```php theme={"theme":"gruvbox-dark-hard"}
use App\Filament\Pages\Settings;
use App\Filament\Resources\Users\UserResource;
use Filament\Navigation\NavigationBuilder;
use Filament\Navigation\NavigationItem;
use Filament\Pages\Dashboard;
use Filament\Panel;
use Filament\Support\Icons\Heroicon;
use function Filament\Support\original_request;
public function panel(Panel $panel): Panel
{
return $panel
// ...
->navigation(function (NavigationBuilder $builder): NavigationBuilder {
return $builder->items([
NavigationItem::make('Dashboard')
->icon(Heroicon::OutlinedHome)
->isActiveWhen(fn (): bool => original_request()->routeIs('filament.admin.pages.dashboard'))
->url(fn (): string => Dashboard::getUrl()),
...UserResource::getNavigationItems(),
...Settings::getNavigationItems(),
]);
});
}
```
Loading preview
### Registering custom navigation groups
If you want to register groups, you can call the `groups()` method:
```php theme={"theme":"gruvbox-dark-hard"}
use App\Filament\Pages\HomePageSettings;
use App\Filament\Resources\Categories\CategoryResource;
use App\Filament\Resources\Pages\PageResource;
use Filament\Navigation\NavigationBuilder;
use Filament\Navigation\NavigationGroup;
use Filament\Panel;
public function panel(Panel $panel): Panel
{
return $panel
// ...
->navigation(function (NavigationBuilder $builder): NavigationBuilder {
return $builder->groups([
NavigationGroup::make('Website')
->items([
...PageResource::getNavigationItems(),
...CategoryResource::getNavigationItems(),
...HomePageSettings::getNavigationItems(),
]),
]);
});
}
```
### Disabling navigation
You may disable navigation entirely by passing `false` to the `navigation()` method:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Panel;
public function panel(Panel $panel): Panel
{
return $panel
// ...
->navigation(false);
}
```
Loading preview
Alternatively, you may pass a closure that returns a boolean to decide dynamically. Returning `false` hides the navigation, while returning `true` renders the default auto-discovered navigation items. This is useful for flows such as onboarding or setup wizards where the navigation should only appear once the user has reached a particular state:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Panel;
public function panel(Panel $panel): Panel
{
return $panel
// ...
->navigation(fn (): bool => auth()->user()->hasCompletedOnboarding());
}
```
### Disabling the topbar
You may disable topbar entirely by passing `false` to the `topbar()` method:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Panel;
public function panel(Panel $panel): Panel
{
return $panel
// ...
->topbar(false);
}
```
### Replacing the sidebar and topbar Livewire components
You may completely replace the Livewire components that are used to render the sidebar and topbar, passing your own Livewire component class name into the `sidebarLivewireComponent()` or `topbarLivewireComponent()` method:
```php theme={"theme":"gruvbox-dark-hard"}
use App\Livewire\Sidebar;
use App\Livewire\Topbar;
use Filament\Panel;
public function panel(Panel $panel): Panel
{
return $panel
// ...
->sidebarLivewireComponent(Sidebar::class)
->topbarLivewireComponent(Topbar::class);
}
```
## Disabling breadcrumbs
The default layout will show breadcrumbs to indicate the location of the current page within the hierarchy of the app.
You may disable breadcrumbs in your [configuration](https://filament-34a8cf01.mintlify.site/4.x/panel-configuration.md):
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Panel;
public function panel(Panel $panel): Panel
{
return $panel
// ...
->breadcrumbs(false);
}
```
## Adding a breadcrumb to a custom page
Custom pages do not include a breadcrumb for the current page by default. You may add one using the `$breadcrumb` property:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Pages\Page;
class Settings extends Page
{
protected static ?string $breadcrumb = 'Settings';
// ...
}
```
## Including the navigation hierarchy in breadcrumbs
By default, breadcrumbs for a page are built from its resource and parent record relationships. For example, an `EditRecord` page's breadcrumbs are derived from its resource's list and view pages, and any parent resources in the case of nested resources.
If you would also like breadcrumbs to reflect the full navigation hierarchy of a page, including its [cluster](https://filament-34a8cf01.mintlify.site/4.x/navigation/clusters.md), [navigation group](#grouping-navigation-items), and [navigation parent item](#grouping-navigation-items-under-other-items), you can enable this behavior in your [configuration](https://filament-34a8cf01.mintlify.site/4.x/panel-configuration.md):
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Panel;
public function panel(Panel $panel): Panel
{
return $panel
// ...
->breadcrumbs(hasNavigationHierarchy: true);
}
```
When enabled, the navigation hierarchy is prepended to the page's existing breadcrumbs. If a custom page does not have a `$breadcrumb`, its title is used as the current breadcrumb when its navigation hierarchy can be resolved. If the page is not present in the navigation, its existing breadcrumbs are used instead.
## Reloading the sidebar and topbar
Once a page in the panel is loaded, the sidebar and topbar are not reloaded until you navigate away from the page, or until a menu item is clicked to trigger an action. You can manually reload these components to update them by dispatching a `refresh-sidebar` or `refresh-topbar` browser event.
To dispatch an event from PHP, you can call the `$this->dispatch()` method from any Livewire component, such as a page class, relation manager class, or widget class:
```php theme={"theme":"gruvbox-dark-hard"}
$this->dispatch('refresh-sidebar');
```
When your code does not live inside a Livewire component, such as when you have a custom action class, you can inject the `$livewire` argument into a closure function, and call `dispatch()` on that:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Actions\Action;
use Livewire\Component;
Action::make('create')
->action(function (Component $livewire) {
// ...
$livewire->dispatch('refresh-sidebar');
})
```
Alternatively, you can dispatch an event from JavaScript using the `$dispatch()` Alpine.js helper method, or the native browser `window.dispatchEvent()` method:
```html theme={"theme":"gruvbox-dark-hard"}
```
```javascript theme={"theme":"gruvbox-dark-hard"}
window.dispatchEvent(new CustomEvent('refresh-sidebar'));
```
[Edit this page on GitHub](https://github.com/filamentphp/filament/edit/4.x/docs/06-navigation/01-overview.md)
## Sponsored by
[Your logo here](https://github.com/sponsors/danharrin)
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.