Download the PHP package rawilk/filament-inner-nav without Composer

filament-inner-nav

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.

Installation

You can install the package via composer:

You can publish the config file with:

You can view the default configuration here: https://github.com/rawilk/filament-inner-nav/blob/main/config/filament-inner-nav.php

The views can be published with:

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:

2. Define a $record property on each of your custom resource pages:

   Be sure to change ModelName to the class name of your model.

3. Define an innerNav static method on your resource:

4. In each of your custom pages, wrap the content inside of the <x-filament-inner-nav::page> 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

Enable wire:navigate

Allow the usage of livewire's wire:navigate by using the wireNavigate() method on the InnerNav object:

This option can be globally configured in a service provider. See Global Configuration.

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.

For more advanced customization, you may return an HtmlString object from a closure with either of these methods:

You may also return a custom view using view('...') from the closure on the title() method if needed.

Item Icons

You can set an icon for each navigation item via the icon() method on the InnerNavItem object:

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.

Item Visibility

Items can be hidden from the UI by calling either the visible() or hidden() methods on the InnerNav object.

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.

Item Badges

You may add a badge to any navigation item by calling the badge() method on the InnerNavItem object.

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

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

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.

Unlike with a collapsible group, the direct InnerNavItem children are allowed to have icons.

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:

Any InnerNavGroup objects added with this layout will be rendered as a dropdown menu.

Global Configuration

Many options on the InnerNav, InnerNavItem, and InnerNavGroup objects can be configured globally, typically in a service provider somewhere.

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

Setup

For convenience, you can run the setup bin script for easy installation for local development.

Formatting

Although formatting is done automatically via workflow, you can format php code locally before committing with a composer script:

Testing

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security

Please review my security policy on how to report security vulnerabilities.

Credits

• Randall Wilk
• All Contributors

Alternatives

Some alternatives to this package include:

• 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

The MIT License (MIT). Please see License File for more information.