PHPackages                             kodeartisan/filament-page-with-sidebar - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Admin Panels](/categories/admin)
4. /
5. kodeartisan/filament-page-with-sidebar

ActiveLibrary[Admin Panels](/categories/admin)

kodeartisan/filament-page-with-sidebar
======================================

Organize resource pages in sidebar instead of putting all the buttons and links elsewhere in order to make navigation between pages more comfortable.

01Blade

Since Mar 29Pushed 2y agoCompare

[ Source](https://github.com/kodeartisan/filament-page-with-sidebar)[ Packagist](https://packagist.org/packages/kodeartisan/filament-page-with-sidebar)[ RSS](/packages/kodeartisan-filament-page-with-sidebar/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependenciesVersions (1)Used By (0)

Filament Page With Sidebar
==========================

[](#filament-page-with-sidebar)

[![StandWithPalestine](https://raw.githubusercontent.com/TheBSD/StandWithPalestine/main/badges/StandWithPalestine.svg)](https://github.com/TheBSD/StandWithPalestine/blob/main/docs/README.md)[![Latest Version on Packagist](https://camo.githubusercontent.com/ea7d3e818ef8a19fb3d84004311821cfe37b186b159939c131af2623c4b3ba70/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f61796d616e616c68617474616d692f66696c616d656e742d706167652d776974682d736964656261722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/aymanalhattami/filament-page-with-sidebar)[![Total Downloads](https://camo.githubusercontent.com/a91466f5a3b1e856cbfe6231d115adbc3b9a98c4cb451ebb5668cd0de1887f68/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f61796d616e616c68617474616d692f66696c616d656e742d706167652d776974682d736964656261722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/aymanalhattami/filament-page-with-sidebar)

Organize pages in the sidebar in order to make navigation between pages more comfortable.

> **Note:**It supports both pages and resource pages.

> **Note:**For [Filament 2.x](https://filamentphp.com/docs/2.x/admin/installation) use [version 1.x](https://github.com/aymanalhattami/filament-page-with-sidebar/tree/1.x)

Screenshots
-----------

[](#screenshots)

LTR (Left to Right) [![filament-page-with-sidebar](https://raw.githubusercontent.com/aymanalhattami/filament-page-with-sidebar/main/images/users-view-EN.png)](https://raw.githubusercontent.com/aymanalhattami/filament-page-with-sidebar/main/images/users-view-EN.png)

RTL (Right to Left) [![filament-page-with-sidebar](https://raw.githubusercontent.com/aymanalhattami/filament-page-with-sidebar/main/images/users-view-AR.png)](https://raw.githubusercontent.com/aymanalhattami/filament-page-with-sidebar/main/images/users-view-AR.png)

Please check out this video by Povilas Korop (Laravel Daily) to learn more about our package: [link](https://www.youtube.com/watch?v=J7dH8O-YBnY)

Installation
------------

[](#installation)

```
composer require aymanalhattami/filament-page-with-sidebar
```

optionally you can publish config, views and components files

```
php artisan vendor:publish --tag="filament-page-with-sidebar-config"
php artisan vendor:publish --tag="filament-page-with-sidebar-views"
```

Usage with Resource Pages
-------------------------

[](#usage-with-resource-pages)

1. First you need to prepare resource pages, for example, we have an edit page, view page, manage page, change password page, and dashboar page for UserResource

```
use Filament\Resources\Resource;

class UserResource extends Resource
{
    // ...

    public static function getPages(): array
    {
        return [
            'index' => App\Filament\Resources\UserResource\Pages\ListUsers::route('/'),
            'edit' => App\Filament\Resources\UserResource\Pages\EditUser::route('/{record}/edit'),
            'view' => App\Filament\Resources\UserResource\Pages\ViewUser::route('/{record}/view'),
            'manage' => App\Filament\Resources\UserResource\Pages\ManageUser::route('/{record}/manage'),
            'password.change' => App\Filament\Resources\UserResource\Pages\ChangePasswordUser::route('/{record}/password/change'),
            'dashboard' => App\Filament\Resources\UserResource\Pages\DashboardUser::route('/{record}/dashboard'),
            // ... more pages
        ];
    }

    // ...
}
```

2. Define a $record property in each custom page, example

```
public ModelName $record; // public User $record;
```

3. Then, define the sidebar method as static in the resource

```
use Illuminate\Database\Eloquent\Model;
use Filament\Resources\Resource;
use AymanAlhattami\FilamentPageWithSidebar\FilamentPageSidebar;
use AymanAlhattami\FilamentPageWithSidebar\PageNavigationItem;

class UserResource extends Resource
{
    // ....

    public static function sidebar(Model $record): FilamentPageSidebar
    {
        return FilamentPageSidebar::make()
            ->setNavigationItems([
                PageNavigationItem::make('User Dashboard')
                    ->url(function () use ($record) {
                        return static::getUrl('dashboard', ['record' => $record->id]);
                    }),
                PageNavigationItem::make('View User')
                    ->url(function () use ($record) {
                        return static::getUrl('view', ['record' => $record->id]);
                    }),
                PageNavigationItem::make('Edit User')
                    ->url(function () use ($record) {
                        return static::getUrl('edit', ['record' => $record->id]);
                    }),
                PageNavigationItem::make('Manage User')
                    ->url(function () use ($record) {
                        return static::getUrl('manage', ['record' => $record->id]);
                    }),
                PageNavigationItem::make('Change Password')
                    ->url(function () use ($record) {
                        return static::getUrl('password.change', ['record' => $record->id]);
                    }),

                // ... more items
            ]);
    }

    // ....
}
```

4. Use x-filament-page-with-sidebar::page component in the page blade file as a wrapper for the whole content

```
// filament.resources.user-resource.pages.change-password-user

    // ... page content

```

or add the trait `AymanAlhattami\FilamentPageWithSidebar\Traits\HasPageSidebar` on any page you want the sidebar included. This trait will add the sidebar to the Page. Add it to all your Resource Pages :

```
// ...
use AymanAlhattami\FilamentPageWithSidebar\Traits\HasPageSidebar;

class ViewUser extends ViewRecord
{
    use HasPageSidebar; // use this trait to activate the Sidebar

    protected static string $resource = UserResource::class;

    protected function getHeaderActions(): array
    {
        return [
            Actions\EditAction::make(),
        ];
    }
}
```

If you want to use custom view, you can still overwrite the default value with `protected static string $hasSidebar = false;` and `protected static $view = 'filament.[...].user-resource.pages.view-user';`

Usage with Page
---------------

[](#usage-with-page)

1. Add the trait `AymanAlhattami\FilamentPageWithSidebar\Traits\HasPageSidebar` on any page you want the sidebar included.
2. Then, define the sidebar method as static in the page

```
// ...
use AymanAlhattami\FilamentPageWithSidebar\Traits\HasPageSidebar;
use Filament\Pages\Page;

class GeneralSettings extends Page
{
    use HasPageSidebar; // use this trait to activate the Sidebar

    // ...
    public static function sidebar(): FilamentPageSidebar
    {
        return FilamentPageSidebar::make()
            ->setTitle('Application Settings')
            ->setDescription('general, admin, website, sms, payments, notifications, shipping')
            ->setNavigationItems([
                PageNavigationItem::make('General Settings')
                    ->translateLabel()
                    ->url(GeneralSettings::getUrl())
                    ->icon('heroicon-o-cog-6-tooth')
                    ->isActiveWhen(function () {
                        return request()->routeIs(GeneralSettings::getRouteName());
                    })
                    ->visible(true),
                PageNavigationItem::make('Admin Panel Settings')
                    ->translateLabel()
                    ->url(AdminPanelSettings::getUrl())
                    ->icon('heroicon-o-cog-6-tooth')
                    ->isActiveWhen(function () {
                        return request()->routeIs(AdminPanelSettings::getRouteName());
                    })
                    ->visible(true),
                PageNavigationItem::make('Web Settings')
                    ->translateLabel()
                    ->url(WebsiteSettings::getUrl())
                    ->icon('heroicon-o-cog-6-tooth')
                    ->isActiveWhen(function () {
                        return request()->routeIs(WebsiteSettings::getRouteName());
                    })
                    ->visible(true),
                // ...
            ]);
    }

    // ...
}
```

More Options
------------

[](#more-options)

### Set title and description for sidebar

[](#set-title-and-description-for-sidebar)

You can set the title or description by using setTitle, setDescription, setDescriptionCopyable methods for the sidebar that will be at the beginning of the sidebar on the top, for example

```
// ...

public static function sidebar(Model $record): FilamentPageSidebar
{
    return FilamentPageSidebar::make()
        ->setTitle('Sidebar title')
        ->setDescription('Sidebar description')
        ->setDescriptionCopyable()
        ->setNavigationItems([
            PageNavigationItem::make(__('User Dashboard'))
                ->url(function () use ($record) {
                    return static::getUrl('dashboard', ['record' => $record->id]);
                }),
            PageNavigationItem::make(__('View User'))
                ->url(function () use ($record) {
                    return static::getUrl('view', ['record' => $record->id]);
                }),

            // ... more items
        ]);
}

// ...
```

### Set navigation layout

[](#set-navigation-layout)

You can set navigation as sidebar by using `->sidebarNavigation()` or as topbar by using `->topbarNavigation()`. The default layout is sidebar

#### Sidebar

[](#sidebar)

[![filament-page-with-sidebar](https://raw.githubusercontent.com/aymanalhattami/filament-page-with-sidebar/main/images/sidebar.png)](https://raw.githubusercontent.com/aymanalhattami/filament-page-with-sidebar/main/images/sidebar.png)

```
// ...

public static function sidebar(Model $record): FilamentPageSidebar
{
    return FilamentPageSidebar::make()
        ->sidebarNavigation();
        //
}

// ...
```

#### Topbar

[](#topbar)

[![filament-page-with-sidebar](https://raw.githubusercontent.com/aymanalhattami/filament-page-with-sidebar/main/images/topbar.png)](https://raw.githubusercontent.com/aymanalhattami/filament-page-with-sidebar/main/images/topbar.png)

```
// ...

public static function sidebar(Model $record): FilamentPageSidebar
{
    return FilamentPageSidebar::make()
        ->topbarNavigation();
        //
}

// ...
```

### Add icon

[](#add-icon)

You can add an icon to the item by using the icon method, for example

```
// ...

public static function sidebar(Model $record): FilamentPageSidebar
{
    return FilamentPageSidebar::make()
        ->setNavigationItems([
            PageNavigationItem::make('Change Password')
                ->url(function () use ($record) {
                    return static::getUrl('password.change', ['record' => $record->id]);
                })->icon('heroicon-o-collection')

            // ... more items
        ]);
}

// ...
```

### Add group

[](#add-group)

You may group navigation items, for example

```
// ...

public static function sidebar(Model $record): FilamentPageSidebar
{
    return FilamentPageSidebar::make()
        ->setNavigationItems([
            PageNavigationItem::make('Change Password')
                ->url(function () use ($record) {
                    return static::getUrl('password.change', ['record' => $record->id]);
                })
                ->group('Manage User')

            // ... more items
        ]);
}

// ...
```

### Set active item

[](#set-active-item)

You can make an item active "has a different background color" by using isActiveWhen method, for example

```
// ...
public static function sidebar(Model $record): FilamentPageSidebar
{
    return FilamentPageSidebar::make()
        ->setNavigationItems([
            PageNavigationItem::make('Change Password')
                ->url(function () use ($record) {
                    return static::getUrl('password.change', ['record' => $record->id]);
                })
                ->isActiveWhen(function () {
                    return request()->route()->action['as'] == 'filament.resources.users.password.change';
                })
            // ... more items
        ]);
}
// ...
```

### Hide the item

[](#hide-the-item)

You can control the visibility of an item from the sidebar by using visible method, for example

```
// ...

public static function sidebar(Model $record): FilamentPageSidebar
{
    return FilamentPageSidebar::make()
        ->setNavigationItems([
            PageNavigationItem::make('Change Password')
                ->url(function () use ($record) {
                    return static::getUrl('password.change', ['record' => $record->id]);
                })
                ->visible(false)
            // ... more items
        ]);
}
    ,
// ...
```

### Add bage to the item

[](#add-bage-to-the-item)

You can add a badge to the item by using the badge method, for example

```
// ...
public static function sidebar(Model $record): FilamentPageSidebar
{
    return FilamentPageSidebar::make()
        ->setNavigationItems([
            PageNavigationItem::make('Change Password')
                ->url(function () use ($record) {
                    return static::getUrl('password.change', ['record' => $record->id]);
                })
                ->badge("badge name")
            // ... more items
        ]);
}
    ,
// ...
```

### Translate the item

[](#translate-the-item)

You can translate a label by using translateLabel method, for example

```
// ...
public static function sidebar(Model $record): FilamentPageSidebar
{
    return FilamentPageSidebar::make()->translateLabel()
        ->setNavigationItems([
            PageNavigationItem::make('Change Password')
                ->url(function () use ($record) {
                    return static::getUrl('password.change', ['record' => $record->id]);
                })
            // ... more items
        ]);
}
    ,
// ...
```

License
-------

[](#license)

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

[Demo Project Link](https://github.com/aymanalhattami/filament-page-with-sidebar-project)

###  Health Score

13

—

LowBetter than 1% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity1

Limited adoption so far

Community12

Small or concentrated contributor base

Maturity19

Early-stage or recently created project

 Bus Factor1

Top contributor holds 71.1% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

### Community

Maintainers

![](https://www.gravatar.com/avatar/59194b84758d041406b9c44ba1c672a2663af3e3dd06a899af7ac9ef1f75d8db?d=identicon)[kodeartisan](/maintainers/kodeartisan)

---

Top Contributors

[![aymanalhattami](https://avatars.githubusercontent.com/u/34315778?v=4)](https://github.com/aymanalhattami "aymanalhattami (69 commits)")[![Thiktak](https://avatars.githubusercontent.com/u/1201486?v=4)](https://github.com/Thiktak "Thiktak (11 commits)")[![fouteox](https://avatars.githubusercontent.com/u/88294294?v=4)](https://github.com/fouteox "fouteox (9 commits)")[![faizananwerali](https://avatars.githubusercontent.com/u/12691366?v=4)](https://github.com/faizananwerali "faizananwerali (4 commits)")[![kodeartisan](https://avatars.githubusercontent.com/u/8433116?v=4)](https://github.com/kodeartisan "kodeartisan (2 commits)")[![jeffersongoncalves](https://avatars.githubusercontent.com/u/411493?v=4)](https://github.com/jeffersongoncalves "jeffersongoncalves (1 commits)")[![muath-ye](https://avatars.githubusercontent.com/u/34031333?v=4)](https://github.com/muath-ye "muath-ye (1 commits)")

### Embed Badge

![Health badge](/badges/kodeartisan-filament-page-with-sidebar/health.svg)

```
[![Health](https://phpackages.com/badges/kodeartisan-filament-page-with-sidebar/health.svg)](https://phpackages.com/packages/kodeartisan-filament-page-with-sidebar)
```

###  Alternatives

[jeroennoten/laravel-adminlte

Easy AdminLTE integration with Laravel

4.0k4.8M43](/packages/jeroennoten-laravel-adminlte)[dmstr/yii2-adminlte-asset

AdminLTE backend theme asset bundle for Yii 2.0 Framework

1.1k1.8M67](/packages/dmstr-yii2-adminlte-asset)[dwij/laraadmin

LaraAdmin is a Open source Laravel Admin Panel / CMS which can be used as Admin Backend, Data Management Tool or CRM boilerplate for Laravel with features like CRUD Generation, Module Manager, Media, Menus, Backups and much more

1.6k68.7k](/packages/dwij-laraadmin)[filament/spatie-laravel-media-library-plugin

Filament support for `spatie/laravel-medialibrary`.

1764.8M125](/packages/filament-spatie-laravel-media-library-plugin)[bezhansalleh/filament-exceptions

A Simple & Beautiful Pluggable Exception Viewer for FilamentPHP's Admin Panel

193195.9k13](/packages/bezhansalleh-filament-exceptions)[filament/infolists

Easily add beautiful read-only infolists to any Livewire component.

1220.8M36](/packages/filament-infolists)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)