PHPackages                             aymanalhattami/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. aymanalhattami/filament-page-with-sidebar

ActiveLibrary[Admin Panels](/categories/admin)

aymanalhattami/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.

3.0.0(10mo ago)270197.0k↓38.3%32[1 PRs](https://github.com/aymanalhattami/filament-page-with-sidebar/pulls)2MITPHPCI passing

Since Mar 21Pushed 1w ago2 watchersCompare

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

READMEChangelog (10)Dependencies (12)Versions (44)Used By (2)

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

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

[![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)[![GitHub Tests Action Status](https://camo.githubusercontent.com/5ba84c34bb305abc750a1ce5c32bb406517bed73361fced6f9627648ae83ad4d/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f61796d616e616c68617474616d692f66696c616d656e742d706167652d776974682d736964656261722f72756e2d74657374732e796d6c3f6272616e63683d6d61696e266c6162656c3d7465737473267374796c653d666c61742d737175617265)](https://github.com/aymanalhattami/filament-page-with-sidebar/actions?query=workflow%3Arun-tests+branch%3Amain)[![GitHub Code Style Action Status](https://camo.githubusercontent.com/87264790d4984c2a74db6216275de5d3e5a9bbd0f17d76d3d47b1d75a7deae02/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f61796d616e616c68617474616d692f66696c616d656e742d706167652d776974682d736964656261722f6669782d7068702d636f64652d7374796c652d6973737565732e796d6c3f6272616e63683d6d61696e266c6162656c3d636f64652532307374796c65267374796c653d666c61742d737175617265)](https://github.com/aymanalhattami/filament-page-with-sidebar/actions?query=workflow%3A%22Fix+PHP+code+styling%22+branch%3Amain)

Organize pages in the sidebar in order to make navigation between pages more comfortable. It supports both custom pages and resource pages

**Note:**

> For [Filament 4.x | Filament 5.x](https://filamentphp.com/docs/introduction/installation) use [version 3.x](https://github.com/aymanalhattami/filament-page-with-sidebar/tree/3.x)

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

> 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 dashboard 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

57

—

FairBetter than 98% of packages

Maintenance79

Regular maintenance activity

Popularity53

Moderate usage in the ecosystem

Community26

Small or concentrated contributor base

Maturity58

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 77.4% 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.

###  Release Activity

Cadence

Every ~32 days

Recently: every ~145 days

Total

36

Last Release

69d ago

Major Versions

1.1.6 → 2.0.02023-08-05

1.x-dev → 2.0.32023-08-30

2.4.2 → v3.x-dev2023-11-01

v2.x-dev → 3.0.02025-09-06

3.0.0 → v4.x-dev2026-04-27

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/34315778?v=4)[Ayman Alhattami](/maintainers/aymanalhattami)[@aymanalhattami](https://github.com/aymanalhattami)

---

Top Contributors

[![aymanalhattami](https://avatars.githubusercontent.com/u/34315778?v=4)](https://github.com/aymanalhattami "aymanalhattami (171 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (12 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)")[![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4)](https://github.com/github-actions[bot] "github-actions[bot] (6 commits)")[![faizananwerali](https://avatars.githubusercontent.com/u/12691366?v=4)](https://github.com/faizananwerali "faizananwerali (5 commits)")[![yuters](https://avatars.githubusercontent.com/u/801718?v=4)](https://github.com/yuters "yuters (2 commits)")[![jeffersongoncalves](https://avatars.githubusercontent.com/u/411493?v=4)](https://github.com/jeffersongoncalves "jeffersongoncalves (1 commits)")[![marco76tv](https://avatars.githubusercontent.com/u/1944941?v=4)](https://github.com/marco76tv "marco76tv (1 commits)")[![muath-ye](https://avatars.githubusercontent.com/u/34031333?v=4)](https://github.com/muath-ye "muath-ye (1 commits)")[![eugenefvdm](https://avatars.githubusercontent.com/u/1836436?v=4)](https://github.com/eugenefvdm "eugenefvdm (1 commits)")[![alisalehi1380](https://avatars.githubusercontent.com/u/111766206?v=4)](https://github.com/alisalehi1380 "alisalehi1380 (1 commits)")

---

Tags

filamentlaravel

###  Code Quality

TestsPest

Static AnalysisPHPStan

Code StyleLaravel Pint

### Embed Badge

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

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

###  Alternatives

[rawilk/profile-filament-plugin

Profile & MFA starter kit for filament.

3914.6k](/packages/rawilk-profile-filament-plugin)[stephenjude/filament-jetstream

A Laravel starter kit built with Filament inspired by Jetstream.

17760.2k3](/packages/stephenjude-filament-jetstream)[stephenjude/filament-two-factor-authentication

Filament Two Factor Authentication: Google 2FA + Passkey Authentication

84215.9k9](/packages/stephenjude-filament-two-factor-authentication)[backstage/mails

View logged mails and events in a beautiful Filament UI.

16120.1k](/packages/backstage-mails)[marcelweidum/filament-passkeys

Use passkeys in your filamentphp app

6649.5k1](/packages/marcelweidum-filament-passkeys)[mradder/filament-logger

Audit logging, activity tracking, exports, alerts, and dashboards for Filament admin panels.

2317.4k](/packages/mradder-filament-logger)

PHPackages © 2026

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