PHPackages marshmallow/nova-tabs - 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. marshmallow/nova-tabs AbandonedArchivedLibrary[Utility & Helpers](/categories/utility) marshmallow/nova-tabs ===================== Laravel Nova - Tabs. v2.31.0(9mo ago)05.7k1MITPHPPHP ^7.4|^8 Since Jan 7Pushed 9mo ago2 watchersCompare [ Source](https://github.com/marshmallow-packages/nova-tabs)[ Packagist](https://packagist.org/packages/marshmallow/nova-tabs)[ RSS](/packages/marshmallow-nova-tabs/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (2)Dependencies (5)Versions (3)Used By (1) [![Nova Tabs, awesome resource tabs for Nova](banner.png)](banner.png) --- [![Latest Version on Github](https://camo.githubusercontent.com/7a52f46d4df1163f1b74a1f5b31d335d17cf173a9357ca62c188cc8c7a881aaa/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6d617273686d616c6c6f772f6e6f76612d746162732e7376673f7374796c653d666c6174)](https://packagist.org/packages/marshmallow/nova-tabs) Important This package was originally forked from [eminiarts/nova-tabs](https://github.com/eminiarts/nova-tabs). Since we were making many opinionated changes, we decided to continue development in our own version rather than submitting pull requests that might not benefit all users of the original package. You're welcome to use this package, we're actively maintaining it. If you encounter any issues, please don't hesitate to reach out. 1. [Requirements](#Requirements) 2. [Installation](#Installation) 3. [Usage](#Usage) 1. [Tabs Panel](#tabs-panel) 2. [Relationship Tabs](#relationship-tabs) 3. [Combine Fields and Relations in Tabs](#combine-fields-and-relations-in-tabs) 4. [Actions in Tabs](#actions-in-tabs) 5. [Tabs on Edit View](#tabs-on-edit-view) 4. [Tab object](#tab-object) 5. [Customization](#customization) 1. [Tab](#tab) 2. [Default search](#default-search) 3. [Display more than 5 items](#display-more-than-5-items) 4. [Tab change Global Event](#tab-change-global-event) 6. [Upgrade to V2](#upgrade-to-v2) Requirements ------------ [](#requirements) - `php: ^7.4 | ^8` - `laravel/nova: ^4` For Laravel Nova Version 3, please use nova-tabs v1 instead. Installation ------------ [](#installation) You can install the package in to a Laravel app that uses [Nova](https://nova.laravel.com) via composer: ``` composer require marshmallow/nova-tabs ``` Usage ----- [](#usage) ### Tabs Panel [](#tabs-panel) [![image](https://user-images.githubusercontent.com/3426944/50060698-7835ec00-0197-11e9-8b9c-c7f1e67400db.png)](https://user-images.githubusercontent.com/3426944/50060698-7835ec00-0197-11e9-8b9c-c7f1e67400db.png) You can group fields of a resource into tabs. ``` // in app/Nova/Resource.php use Eminiarts\Tabs\Traits\HasTabs; use Eminiarts\Tabs\Tabs; use Eminiarts\Tabs\Tab; class User extends Resource { use HasTabs; public function fields(Request $request) { return [ Tabs::make('Some Title', [ Tab::make('Balance', [ Number::make('Balance', 'balance'), Number::make('Total', 'total'), ]), Tab::make('Other Info', [ Number::make('Paid To Date', 'paid_to_date') ]), ]), ]; } } ``` The first tab in every `Tabs` instance will be auto-selected. ### Relationship Tabs [](#relationship-tabs) [![image](https://user-images.githubusercontent.com/3426944/50060715-a3b8d680-0197-11e9-8f98-1cac8cf3fd83.png)](https://user-images.githubusercontent.com/3426944/50060715-a3b8d680-0197-11e9-8f98-1cac8cf3fd83.png)These are a bit outdated, as the search and create buttons now show within the panel down where the actual content is displayed, not in the tab panel. ``` // in app/Nova/Resource.php use Eminiarts\Tabs\Tabs; use Laravel\Nova\Fields\HasMany; use Eminiarts\Tabs\Traits\HasTabs; class User extends Resource { use HasTabs; public function fields(Request $request) { return [ Tabs::make('Relations', [ HasMany::make('Invoices'), HasMany::make('Notes'), HasMany::make('Contacts') ]), ]; } } ``` ### Combine Fields and Relations in Tabs [](#combine-fields-and-relations-in-tabs) [![image](https://user-images.githubusercontent.com/3426944/51089909-b3b2de80-1774-11e9-9100-d323accda7db.png)](https://user-images.githubusercontent.com/3426944/51089909-b3b2de80-1774-11e9-9100-d323accda7db.png) [![image](https://user-images.githubusercontent.com/3426944/51089905-aa297680-1774-11e9-9611-4446ca13ab4a.png)](https://user-images.githubusercontent.com/3426944/51089905-aa297680-1774-11e9-9611-4446ca13ab4a.png) ``` use Eminiarts\Tabs\Tabs; use Laravel\Nova\Fields\HasMany; use Eminiarts\Tabs\Traits\HasTabs; use Laravel\Nova\Fields\ID; use Laravel\Nova\Fields\Text; class User extends Resource { use HasTabs; public function fields(Request $request) { return [ Tabs::make(__('Client Custom Details'), [ new Panel(__('Details'), [ ID::make('Id', 'id')->rules('required')->hideFromIndex(), Text::make('Name', 'name'), ]), HasMany::make('Invoices') ]), ]; } } ``` ### Actions in Tabs [](#actions-in-tabs) If your Model uses the `Laravel\Nova\Actions\Actionable` Trait you can put the Actions into a Tab like this: ``` // in app/Nova/Resource.php use Eminiarts\Tabs\Tabs; use Eminiarts\Tabs\Tab; use Eminiarts\Tabs\Traits\HasTabs; use Eminiarts\Tabs\Traits\HasActionsInTabs; // Add this Trait use Laravel\Nova\Actions\ActionResource; // Import the Resource class Client extends Resource { use HasTabs; use HasActionsInTabs; // Use this Trait public function fields(Request $request) { return [ Tabs::make('Client Custom Details', [ Tab::make('Address', [ ID::make('Id', 'id'), Text::make('Name', 'name')->hideFromDetail(), ]), Tab::make('Invoices', [ HasMany::make('Invoices'), ]), Tab::make('Actions', [ $this->actionfield(), // Add Actions whererver you like. ]), ]), ]; } } ``` ### Tabs on Edit View [](#tabs-on-edit-view) [![image](https://user-images.githubusercontent.com/3426944/51790797-055a6080-219a-11e9-8da4-33a621093265.png)](https://user-images.githubusercontent.com/3426944/51790797-055a6080-219a-11e9-8da4-33a621093265.png) Tabs are always shown on edit view as of Nova 4 for now. Tab object ---------- [](#tab-object) As of v1.4.0 it's possible to use a `Tab` class instead of an array to represent your tabs. PropertyTypeDefaultDescriptionname`string``null`The name of the tab, used for the slug. Defaults to the title if not setshowIf`bool` or `Closure``null`If the result is truthy the tab will be shown. `showIf` takes priority over `showUnless` and if neither are set, `true` is assumed.showUnless`bool` or `Closure``null`If the result is falsy the tab will be shown. `showIf` takes priority over `showUnless` and if neither are set, `true` is assumed.bodyClass`string` or `array`Empty arrayA string or string array of classes to add to the tab's body. This sets the `bodyClass` property, if you want to append you can use `addBodyClass` instead.Customization ------------- [](#customization) ### Display more than 5 items [](#display-more-than-5-items) By default, any `HasMany`, `BelongsToMany` and `MorphMany` fields show 5 items in their index. You can use Nova's built-in static property `$perPageViaRelationship` on the respective resource to show more (or less). ### Tab change Global Event [](#tab-change-global-event) Nova Tabs emits an event upon tabs loading and the user clicking on a tab, using [Nova Event Bus](https://nova.laravel.com/docs/4.0/customization/frontend.html#event-bus). Developers can listen to the event called `nova-tabs-changed`, with 2 parameters as payload: The tab panel name and the tab name itself. Example of a component that subscribes to this event: ``` export default { mounted () { Nova.$on('nova-tabs-changed', (panel, tab) => { if (panel === 'Client Details' && tab === 'address') { this.$nextTick(() => this.map.updateSize()) } }) } } ``` Upgrade to 2.0.0 ---------------- [](#upgrade-to-200) - Breaking changes - Removed selectFirstTab, first tab is always displayed first. - Even if you have other panels, tabs will always show up first and has the toolbar. - TabsOnEdit is gone and non relational tabs will simply always display on edit. - I don't use dusk, so didn't check the tests for it either, they might be broken. - Added Eminiarts\\Tabs\\Traits\\HasTabs to overwrite Nova 4 default panel methods in Laravel\\Nova\\ResolveFields. - Moved Eminiarts\\Tabs\\ActionsInTabs to Eminiaarts\\Tabs\\Traits\\HasActionsInTabs. - Added position method to Tab to fix relational tabs showing up last. Credits ------- [](#credits) - Banner was created with - [eminiarts/nova-tabs](https://github.com/eminiarts/nova-tabs) ### Health Score 33 — LowBetter than 75% of packages Maintenance57 Moderate activity, may be stable Popularity20 Limited adoption so far Community10 Small or concentrated contributor base Maturity39 Early-stage or recently created project Bus Factor1 Top contributor holds 100% 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 ~211 days Total 2 Last Release 284d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/be33d2624e24c516e73892b0929447cc762f3622c024ab8d0d2a59042e5d2c7f?d=identicon)[marshmallow](/maintainers/marshmallow) --- Top Contributors [![stefvanesch](https://avatars.githubusercontent.com/u/46725619?v=4)](https://github.com/stefvanesch "stefvanesch (4 commits)") --- Tags laravelnova ### Code Quality Code StylePHP CS Fixer ### Embed Badge ![Health badge](/badges/marshmallow-nova-tabs/health.svg) ``` [![Health](https://phpackages.com/badges/marshmallow-nova-tabs/health.svg)](https://phpackages.com/packages/marshmallow-nova-tabs) ``` ### Alternatives [eminiarts/nova-tabs Laravel Nova - Tabs. 4624.1M20](/packages/eminiarts-nova-tabs)[outl1ne/nova-sortable This Laravel Nova package allows you to reorder models in a Nova resource's index view using drag & drop. 2861.8M9](/packages/outl1ne-nova-sortable)[sbine/route-viewer A Laravel Nova tool to view your registered routes. 57215.9k](/packages/sbine-route-viewer)[markwalet/nova-modal-response A Laravel Nova asset for Modal responses on an action. 14720.0k](/packages/markwalet-nova-modal-response)[datomatic/nova-enum-field A Laravel Nova PHP 8.1 enum field with filters 20134.2k](/packages/datomatic-nova-enum-field)[norman-huth/nova-assets-changer Change Nova resources 2570.1k](/packages/norman-huth-nova-assets-changer) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)