Download the PHP package jibaymcs/tabbed without Composer

Tabbed - In-app tab system for FilamentPHP v5

A FilamentPHP v5 plugin that brings IDE/browser-style tabs to your panel. Open resource pages (Edit, View, Create, List) in tabs, switch between them instantly without losing state, and organize your workflow with drag & drop, renaming, and context menus.

Features

• Open any Filament resource page in a tab
• Instant tab switching (no page reload, state preserved)
• Drag & drop tab reordering
• Inline tab renaming (double-click)
• Right-click context menu (rename, close, close others, close all)
• Middle-click to close tabs (opt-in)
• Configurable tab bar position (topbar, page start, content start, etc.)
• LocalStorage persistence across page navigations
• Background tab opening
• Custom tab labels
• Custom tab colors (accent, background, text) with Filament Color support
• Hover cards on tabs (rich tooltip with custom content on hover)
• Lazy loading & destroy inactive (performance optimization)
• Dropdown mode (compact button replacing the full tab bar)
• Dirty state detection with unsaved changes confirmation modal
• Post-save redirect interception (stay in tab after save, create-to-edit transformation)
• Pinned tabs (anchored left, protected from bulk close, visually distinct)
• Tab search in overflow/dropdown menu (filter by name, keyboard navigation)
• Tab duplication via context menu
• Granular permissions (global + per-tab with $record closures)
• Keyboard shortcuts (configurable, no browser conflicts)
• Reopen last closed tab (history stack, context menu + shortcut)
• Dark mode support
• Translations: English, French & Spanish

Installation

Add the plugin's views to your custom theme CSS file:

Setup

Register the plugin in your PanelProvider:

Usage

Option 1: Automatic with trait

Add HasTabbedActions to your Resource to automatically include the "Open in tab" action on every table row:

Option 2: Manual action

Add OpenInTabAction manually in your table configuration for more control:

Option 3: Row click

Make clicking a table row open the record in a tab instead of navigating to the edit page:

• recordUrl(null) — disables the default link on the row
• recordAction('tabbed') — clicking a row triggers the OpenInTabAction via Livewire
• background() — opens the tab without switching to it
• tabName() — custom label for the tab

Action options

Opening a related record (openFor)

OpenInTabAction opens the page of the record bound to its surrounding context — the row's record on a table, the page's record on an infolist Section, etc. That's almost always what you want.

But when the action lives inside the page of one model and you want it to open a related model, the bound record (the parent) and the target record are different. Without help, the action would call $parent->getKey() and try to open the target page with the parent's id — which 404s silently because that id doesn't exist in the target table.

The openFor() callback solves this. It receives the Filament-injected parent record and returns the actual record whose page should open. From that point on, every downstream callback (tabName, hoverCardContent, tabColor, …) receives the resolved record — so you can write attribute reads naturally without manually walking the relation each time.

When to use it: any time the action's target resource is different from the page/row's resource. Typical example — a "View contact" button in the Contact section of a Ticket infolist:

When NOT to use it: when the action sits on a row of the target resource's table, or in any context where the bound $record is already the model you want to open. The default behaviour is correct — openFor adds no value and just adds noise.

Edge cases:

• If the relation may be null (optional belongsTo), gate the action with ->visible(...) as shown above. Opening a tab without a record id falls through to mounting the page with null and produces another 404.
• If the resolver throws (typo on the relation name, etc.), the action falls back to the parent record rather than crashing the page — you'll see the same 404 you had before, but the surrounding UI keeps working.

Per-tab permissions

Control what users can do with individual tabs. Accepts bool or a Closure receiving $record for conditional logic:

Per-tab permissions combine with global settings (allowReorder, allowRename, etc.) on TabbedPlugin. The global setting is the master switch: if it's off, the per-tab setting is ignored. If the global is on, the per-tab closure decides.

Tab colors

Customize tab appearance per action. Accepts Filament Color palettes, hex values, or any CSS color string:

Hover cards

Display a rich tooltip when hovering over a tab. The content is fully customizable and has access to the $record:

Available positions: Top, TopStart, TopEnd, Bottom, BottomStart, BottomEnd, Left, Right.

Security note: Hover card content is rendered as raw HTML (x-html). If you include user-provided data, make sure to escape it with e() or htmlspecialchars() to prevent XSS vulnerabilities.

The hover card stays visible when moving the cursor from the tab to the card. It also works on overflow dropdown items.

JavaScript events

You can open/close tabs programmatically from anywhere:

Events dispatched by the plugin:

Configuration

Plugin options

Configure via fluent methods in your PanelProvider:

Keyboard shortcuts

Enable keyboard shortcuts for power-user navigation. Disabled by default to avoid unexpected behavior.

Default shortcuts:

Shortcuts are ignored when an input, textarea, or select is focused. They use Alt as the primary modifier to avoid conflicts with browser shortcuts (Ctrl+Tab, Ctrl+W, etc.).

Closed tabs are stored in a session-only history stack (max 10). You can also reopen them via the right-click context menu ("Reopen closed tab").

Performance: Lazy loading & destroy inactive

By default, all open tabs have their Livewire components created immediately. For better performance with many tabs:

A loading spinner appears in the tab panel while the Livewire component loads, and a small loading indicator is shown on the tab itself.

Dropdown mode

Replace the full tab bar with a compact dropdown button:

Clicking the button opens a dropdown listing all tabs with icons, active indicator, close buttons, and hover cards. All existing features (lazy load, middle-click, persistence) work in dropdown mode.

Dirty state & close confirmation

The plugin detects unsaved changes in tab forms. When a form field is modified, an orange dot appears on the tab. If confirmation is enabled, closing a dirty tab shows a Filament-style modal instead of closing immediately.

The dirty state resets automatically after a successful save (save or create Livewire calls). The confirmation modal also appears for "Close others" and "Close all" context menu actions when dirty tabs are involved.

Redirect interception

By default, saving a form inside a tab stays in the tab instead of following Filament's redirect (which would navigate away from the tab system). This works for both Edit and Create pages:

• Edit page: after save, the redirect is blocked and the user stays in the tab
• Create page: after creating a record, the tab automatically transforms into an Edit tab for the new record (new tab ID, updated label and record ID)

Notifications and other Livewire effects are preserved — only the redirect is blocked.

Pinned tabs

Right-click a tab and select "Pin" to pin it. Pinned tabs are visually distinct (primary background + pin icon) and anchored to the left of the tab bar.

Pinned tab protections:

• "Close others" keeps pinned tabs + the target tab
• "Close all" only closes unpinned tabs
• Pinned tabs are never evicted by destroyInactive LRU
• Drag & drop is constrained: pinned tabs can only be reordered among themselves

The close button (x) still works on pinned tabs — pinning protects against bulk close, not individual close. Pin state is persisted in localStorage.

Tab search

When the overflow dropdown (or dropdown mode menu) contains 5 or more tabs, a search field appears at the top. Type to filter tabs by name in real time (case-insensitive, partial match). Use arrow keys to navigate results and Enter to activate the highlighted tab. Escape clears the search, or closes the menu if the search is already empty.

Tab duplication

Right-click a tab and select "Duplicate" to open the same resource/page/record in a new tab. The duplicate opens right after the original with a numbered suffix (e.g. "User #5 (2)"). Colors, hover card, and other settings are copied from the original.

Config file

Publish the config file for project-wide defaults:

Plugin fluent methods take priority over config file values.

Tab bar position

The tab bar can be placed at any Filament render hook position:

The tab bar is rendered at the chosen position, while the tab content panels always render inside <main class="fi-main">.

Changelog

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

Credits

• JibayMcs
• All Contributors

License

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