PHPackages rawilk/filament-inner-nav - 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. [Utility & Helpers](/categories/utility) 4. / 5. rawilk/filament-inner-nav AbandonedArchivedLibrary[Utility & Helpers](/categories/utility) rawilk/filament-inner-nav ========================= Add inner navigation to filament panel pages. v1.1.1(2y ago)4424↓100%3MITBladePHP ^8.1|^8.2|^8.3CI passing Since Sep 18Pushed 1y ago1 watchersCompare [ Source](https://github.com/rawilk/filament-inner-nav)[ Packagist](https://packagist.org/packages/rawilk/filament-inner-nav)[ Docs](https://github.com/rawilk/filament-inner-nav)[ GitHub Sponsors](https://github.com/rawilk)[ RSS](/packages/rawilk-filament-inner-nav/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (3)Dependencies (11)Versions (8)Used By (0) > Note: This package is being abandoned because I originally thought I was going to use it, but then I found out I didn't really need it for filament. If anything, this package was a learning experience for me. filament-inner-nav ================== [](#filament-inner-nav) [![Latest Version on Packagist](https://camo.githubusercontent.com/9b939fa57e3b1184c6e863952940525046775bfc09e73c82e6119c2b533088c6/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f726177696c6b2f66696c616d656e742d696e6e65722d6e61762e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/rawilk/filament-inner-nav)[![Tests](https://github.com/rawilk/filament-inner-nav/workflows/Tests/badge.svg?style=flat-square)](https://github.com/rawilk/filament-inner-nav/workflows/Tests/badge.svg?style=flat-square)[![Total Downloads](https://camo.githubusercontent.com/e8241ea9e2e7e846f3f0d4e0433d7cedd7eda2e5cd88bf5798972a012c10eef8/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f726177696c6b2f66696c616d656e742d696e6e65722d6e61762e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/rawilk/filament-inner-nav)[![PHP from Packagist](https://camo.githubusercontent.com/75ab04a3fa1bf5055cb2ff9db79100239881c4eaf16c145c63d15550f7f8b810/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f7068702d762f726177696c6b2f66696c616d656e742d696e6e65722d6e61763f7374796c653d666c61742d737175617265)](https://packagist.org/packages/rawilk/filament-inner-nav)[![License](https://camo.githubusercontent.com/f037e37f98cfa1a10129b5a5fc8612e476755891d0572c88e0ae6613303590fd/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f726177696c6b2f66696c616d656e742d696e6e65722d6e61763f7374796c653d666c61742d737175617265)](https://github.com/rawilk/filament-inner-nav/blob/main/LICENSE.md) [![Social image](https://camo.githubusercontent.com/bc1551b0fda68fcae1462556022e57ac3ff39dfdd64912adad0feb9e0cc081bb/68747470733a2f2f62616e6e6572732e6265796f6e64636f2e64652f46696c616d656e74253230496e6e65722532304e617669676174696f6e2e706e673f7468656d653d6c69676874267061636b6167654d616e616765723d636f6d706f7365722b72657175697265267061636b6167654e616d653d726177696c6b25324666696c616d656e742d696e6e65722d6e6176267061747465726e3d636861726c696542726f776e267374796c653d7374796c655f31266465736372697074696f6e3d4164642b696e6e65722b6e617669676174696f6e2b746f2b66696c616d656e742b70616e656c2b70616765732e266d643d312673686f7757617465726d61726b3d3026666f6e7453697a653d313030707826696d616765733d637572736f722d636c69636b)](https://camo.githubusercontent.com/bc1551b0fda68fcae1462556022e57ac3ff39dfdd64912adad0feb9e0cc081bb/68747470733a2f2f62616e6e6572732e6265796f6e64636f2e64652f46696c616d656e74253230496e6e65722532304e617669676174696f6e2e706e673f7468656d653d6c69676874267061636b6167654d616e616765723d636f6d706f7365722b72657175697265267061636b6167654e616d653d726177696c6b25324666696c616d656e742d696e6e65722d6e6176267061747465726e3d636861726c696542726f776e267374796c653d7374796c655f31266465736372697074696f6e3d4164642b696e6e65722b6e617669676174696f6e2b746f2b66696c616d656e742b70616e656c2b70616765732e266d643d312673686f7757617465726d61726b3d3026666f6e7453697a653d313030707826696d616765733d637572736f722d636c69636b) The `filament-inner-nav` package allows you to organize resource pages in your Filament panels into a group of "inner navigation" pages. This is useful for when you have a resource page that has many sub-pages, such as when viewing/editing a user record. [![base screenshot](./images/base.png)](./images/base.png) Installation ------------ [](#installation) You can install the package via composer: ``` composer require rawilk/filament-inner-nav ``` You can publish the config file with: ``` php artisan vendor:publish --tag="filament-inner-nav-config" ``` You can view the default configuration here: The views can be published with: ``` php artisan vendor:publish --tag="filament-inner-nav-views" ``` Usage ----- [](#usage) 1. First, you need to generate a filament resource page and then add your custom resource pages to the array from `getPages`. For example, a `UserResource`: ``` use App\Filament\Resources\UserResource\Pages; use Filament\Resources\Resource; class UserResource extends Resource { // ... public static function getPages(): array { 'index' => Pages\ListUsers::route('/'), 'create' => Pages\CreateUser::route('/create'), 'edit' => Pages\EditUser::route('/{record}/edit'), // custom pages... 'authentication' => Pages\UserAuthentication::route('/{record}/authentication'), 'contact' => Pages\Contact::route('/{record}/contact'), 'activity' => Pages\Activity::route('/{record}/activity'), } // ... } ``` 2. Define a `$record` property on each of your custom resource pages: ``` public ModelName $record; // public User $record; ``` > Be sure to change `ModelName` to the class name of your model. 3. Define an `innerNav` static method on your resource: ``` use App\Models\User; use Filament\Resources\Resource; use Rawilk\FilamentInnerNav\InnerNav; use Rawilk\FilamentInnerNav\InnerNavItem; class UserResource extends Resource { // ... public static function innerNav(User $record): InnerNav { return InnerNav::make() ->setNavigationItems([ InnerNavItem::make('Edit User') ->url(fn (): string => static::getUrl('edit', ['record' => $record])), InnerNavItem::make('Password & Authentication') ->url(fn (): string => static::getUrl('authentication', ['record' => $record])), InnerNavItem::make('Contact Information') ->url(fn (): string => static::getUrl('contact', ['record' => $record])), InnerNavItem::make('Activity') ->url(fn (): string => static::getUrl('activity', ['record' => $record])), ]); } } ``` 4. In each of your custom pages, wrap the content inside of the `` blade component: ``` ``` > If the navigation isn't styled correctly, you may need to run `filament:upgrade` to ensure the latest assets are published. Advanced Usage -------------- [](#advanced-usage) ### Enable `wire:navigate` [](#enable-wirenavigate) Allow the usage of livewire's `wire:navigate` by using the `wireNavigate()` method on the `InnerNav` object: ``` public static function innerNav(User $record): InnerNav { return InnerNav::make() ->wireNavigate() ->setNavigationItems([ // ... ]); } ``` > This option can be globally configured in a service provider. See [Global Configuration](#global-configuration). ### Title & Description [](#title--description) You can set a title and/or description for the navigation via the `setTitle()` and `setDescription()` methods on the `InnerNav` object. These will show up directly above the navigation items. ``` public static function innerNav(User $record): InnerNav { return InnerNav::make() ->setTitle('Nav title') ->setDescription('Nav description') ->setNavigationItems([ // ... ]); } ``` For more advanced customization, you may return an `HtmlString` object from a closure with either of these methods: ``` public static function innerNav(User $record): InnerNav { return InnerNav::make() ->setTitle(fn (): HtmlString => new HtmlString('' . $record->name . '')) ->setDescription(fn (): HtmlString => new HtmlString('Nav description')) ->setNavigationItems([ // ... ]); } ``` > You may also return a custom view using `view('...')` from the closure on the `title()` method if needed. ### Item Icons [](#item-icons) You can set an icon for each navigation item via the `icon()` method on the `InnerNavItem` object: ``` public static function innerNav(User $record): InnerNav { return InnerNav::make() ->setNavigationItems([ InnerNavItem::make('Edit User') ->url(fn (): string => static::getUrl('edit', ['record' => $record])) ->icon('heroicon-o-pencil'), ]); } ``` ### Item Active State [](#item-active-state) By default, active state is not set on any navigation item. You may call the `isActiveWhen()` method on the `InnerNavItem` object to set active state. ``` public static function innerNav(User $record): InnerNav { return InnerNav::make() ->setNavigationItems([ InnerNavItem::make('Edit User') ->url(fn (): string => static::getUrl('edit', ['record' => $record])) ->isActiveWhen(fn (): bool => request()->route()->action['as'] === 'filament.resources.users.edit') ]); } ``` ### Item Visibility [](#item-visibility) Items can be hidden from the UI by calling either the `visible()` or `hidden()` methods on the `InnerNav` object. ``` public static function innerNav(User $record): InnerNav { return InnerNav::make() ->setNavigationItems([ InnerNavItem::make('Edit User') ->url(fn (): string => static::getUrl('edit', ['record' => $record])) ->visible(fn (): bool => auth()->user()->can('edit', $record)), ]); } ``` ### Disabling Items [](#disabling-items) There may be cases where you still want to show the navigation link, but disable the user from actually visiting it. You may use the `isDisabledWhen()` method on the `InnerNavItem` object for this. ``` public static function innerNav(User $record): InnerNav { return InnerNav::make() ->setNavigationItems([ InnerNavItem::make('Edit User') ->url(fn (): string => static::getUrl('edit', ['record' => $record])) ->isDisabledWhen(fn (): bool => ! auth()->user()->can('edit', $record)), ]); } ``` ### Item Badges [](#item-badges) You may add a badge to any navigation item by calling the `badge()` method on the `InnerNavItem` object. ``` public static function innerNav(User $record): InnerNav { return InnerNav::make() ->setNavigationItems([ InnerNavItem::make('Edit User') ->url(fn (): string => static::getUrl('edit', ['record' => $record])) ->badge('New'), ]); } ``` ### Groups [](#groups) Items can be grouped in the navigation by using the `InnerNavGroup` object. A group can either be collapsible or static. Collapsible groups can be nested inside a static group. Below will be an example of each group. #### Collapsible Group [](#collapsible-group) Collapsible groups allow you to nest a group of navigation items underneath a button that can toggle the visibility of the items. The UI for this is inspired by how GitHub handles their sub navigation on your account settings pages. ``` public static function innerNav(User $record): InnerNav { return InnerNav::make() ->setNavigationItems([ InnerNavItem::make('Edit User') ->url(fn (): string => static::getUrl('edit', ['record' => $record])), InnerNavGroup::make('Settings') ->icon('heroicon-o-cog') ->items([ InnerNavItem::make('Group item 1') ->url('#'), InnerNavItem::make('Group Item 2') ->url('#'), ]) ]); } ``` [![collapsible group](./images/collapsible-group.png)](./images/collapsible-group.png) **Note:** The `icon` method is optional on the `InnerNavGroup` object. > `InnerNavItem` objects underneath an `InnerNavGroup` are not allowed to have an icon. > By default, collapsible groups are collapsed. You can change this by calling the `expandByDefault()` method on the `InnerNavGroup` object. The group will also be expanded if any of the items inside it are set to active. #### Static Groups [](#static-groups) Also inspired by the GitHub UI, static groups allow you to render navigation links underneath a heading. All you need to do is provide a falsy value to the `collapsible()` method on the `InnerNavGroup` object. ``` public static function innerNav(User $record): InnerNav { return InnerNav::make() ->setNavigationItems([ InnerNavItem::make('Edit User') ->url(fn () => self::getUrl('edit', ['record' => $record])) ->icon('heroicon-o-user'), InnerNavGroup::make('Settings') ->collapsible(false) ->items([ InnerNavGroup::make('Sub Group') ->icon('heroicon-o-rectangle-stack') ->items([ InnerNavItem::make('Sub group item 1') ->url('#'), ]), InnerNavItem::make('Group item 1') ->icon('heroicon-o-rectangle-stack') ->url('#'), InnerNavItem::make('Group Item 2') ->icon('heroicon-o-rectangle-stack') ->url('#'), ]), } ``` [![static group](./images/static-group.png)](./images/static-group.png) > Unlike with a collapsible group, the direct `InnerNavItem` children are allowed to have icons. ### Top Layout [](#top-layout) If you want to render the links on top of your content, instead of on the side, you may use the `setLayout()` method on the `InnerNav` object: ``` use Rawilk\FilamentInnerNav\Enums\InnerNavLayout; use Rawilk\FilamentInnerNav\InnerNav; public static function innerNav(User $record): InnerNav { return InnerNav::make() ->setLayout(InnerNavLayout::Top) ->setNavigationItems([ // ... ]); } ``` [![top layout](./images/top-layout.png)](./images/top-layout.png) > Any `InnerNavGroup` objects added with this layout will be rendered as a dropdown menu. ### Global Configuration [](#global-configuration) Many options on the `InnerNav`, `InnerNavItem`, and `InnerNavGroup` objects can be configured globally, typically in a service provider somewhere. ``` use Illuminate\Support\ServiceProvider; use Rawilk\FilamentInnerNav\Enums\InnerNavLayout; use Rawilk\FilamentInnerNav\InnerNav; use Rawilk\FilamentInnerNav\InnerNavGroup; class AppServiceProvider extends ServiceProvider { public function boot(): void { InnerNav::configureUsing(function (InnerNav $nav) { $nav ->wireNavigate() ->setLayout(InnerNavLayout::Side); }); InnerNavGroup::configureUsing(function (InnerNavGroup $group) { // Expand collapsible groups by default. $group->expandByDefault(); }); } } ``` Styling ------- [](#styling) Many parts of the UI provided by this package are prefixed with a custom CSS class you can hook into with your own styles to override the styling. All class names will start with `fi-inner-nav-`, for example the navigation items all have a class of `fi-inner-nav-item`. It is not practical to list and maintain all the class names used here, so if there's an element you want to style differently, you can either inspect the element in your browser or view the source code of the blade components in this repository. If there's an element that you need to style that doesn't have a custom class, you may submit a PR to add one, however I cannot guarantee that I will merge it. Scripts ------- [](#scripts) ### Setup [](#setup) For convenience, you can run the setup bin script for easy installation for local development. ``` ./bin/setup.sh ``` ### Formatting [](#formatting) Although formatting is done automatically via workflow, you can format php code locally before committing with a composer script: ``` composer format ``` Testing ------- [](#testing) ``` composer test ``` Changelog --------- [](#changelog) Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently. Contributing ------------ [](#contributing) Please see [CONTRIBUTING](.github/CONTRIBUTING.md) for details. Security -------- [](#security) Please review [my security policy](.github/SECURITY.md) on how to report security vulnerabilities. Credits ------- [](#credits) - [Randall Wilk](https://github.com/rawilk) - [All Contributors](../../contributors) Alternatives ------------ [](#alternatives) Some alternatives to this package include: - [Filament Page With Sidebar](https://github.com/aymanalhattami/filament-page-with-sidebar) If you have a similar package to this that you would like to add, please submit a PR with an updated README. License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 36 — LowBetter than 82% of packages Maintenance34 Infrequent updates — may be unmaintained Popularity21 Limited adoption so far Community12 Small or concentrated contributor base Maturity63 Established project with proven stability Bus Factor2 2 contributors hold 50%+ of commits 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 ~38 days Total 3 Last Release 888d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/1e2f599d4d290bbb514a933d4f21c3f18fb093f5f8a9994cb17f5469853c749c?d=identicon)[rawilk](/maintainers/rawilk) --- Top Contributors [![rawilk](https://avatars.githubusercontent.com/u/22842525?v=4)](https://github.com/rawilk "rawilk (35 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (21 commits)")[![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4)](https://github.com/github-actions[bot] "github-actions[bot] (20 commits)") --- Tags filament-pluginfilamentphplaravelnavigationlaravelnavigationfilamentfilament-pluginrawilk ### Code Quality TestsPest Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/rawilk-filament-inner-nav/health.svg) ``` [![Health](https://phpackages.com/badges/rawilk-filament-inner-nav/health.svg)](https://phpackages.com/packages/rawilk-filament-inner-nav) ``` ### Alternatives [codewithdennis/filament-select-tree The multi-level select field enables you to make single selections from a predefined list of options that are organized into multiple levels or depths. 320392.1k17](/packages/codewithdennis-filament-select-tree)[pboivin/filament-peek Full-screen page preview modal for Filament 253319.6k12](/packages/pboivin-filament-peek)[dotswan/filament-map-picker Easily pick and retrieve geo-coordinates using a map-based interface in your Filament applications. 124139.3k2](/packages/dotswan-filament-map-picker)[creagia/filament-code-field A Filamentphp input field to edit or view code data. 58289.3k3](/packages/creagia-filament-code-field)[schmeits/filament-character-counter This is a Filament character counter TextField and Textarea form field for Filament v4 and v5 33184.7k6](/packages/schmeits-filament-character-counter)[tapp/filament-google-autocomplete-field Filament plugin that provides a Google Autocomplete field 3098.1k](/packages/tapp-filament-google-autocomplete-field) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)