hdaklue / actioncrumb
A fluent breadcrumb builder with dropdown actions for Laravel Livewire
Installs: 61
Dependents: 0
Suggesters: 0
Security: 0
Stars: 2
Watchers: 0
Forks: 0
Open Issues: 0
pkg:composer/hdaklue/actioncrumb
Requires
- php: ^8.2
- blade-ui-kit/blade-heroicons: ^2.0
- blade-ui-kit/blade-icons: ^1.0
- filament/actions: ^4.0
- illuminate/support: ^11.0|^12.0
- jenssegers/agent: ^2.6
- livewire/livewire: ^3.0
Requires (Dev)
- orchestra/testbench: ^9.0
- pestphp/pest: ^3.0
- dev-main
- 2.0.32
- 2.0.31
- 2.0.30
- 2.0.29
- 2.0.28
- 2.0.27
- 2.0.26
- 2.0.25
- 2.0.24
- 2.0.23
- 2.0.22
- 2.0.21
- 2.0.20
- 2.0.19
- 2.0.18
- 2.0.17
- 2.0.16
- 2.0.15
- 2.0.14
- 2.0.13
- 2.0.12
- 2.0.11
- 2.0.10
- 2.0.9
- 2.0.8
- 2.0.7
- 2.0.6
- 2.0.5
- 2.0.4
- 2.0.3
- 2.0.2
- 2.0.1
- 2.0.0
- 1.1.3
- 1.1.2
- 1.1.1
- 1.1.0
- 1.0.12
- 1.0.11
- 1.0.10
- 1.0.9
- 1.0.8
- 1.0.7
- 1.0.6
- 1.0.5
- 1.0.4
- 1.0.3
- 1.0.2
- 1.0.1
- 1.0.0
This package is auto-updated.
Last update: 2025-10-07 12:45:23 UTC
README
Smart breadcrumbs with contextual actions for Laravel applications.
Transform cluttered admin toolbars into elegant, contextual navigation:
Dashboard > Users ⌄ > John Doe ⌄
↓ ↓
[Export] [Edit]
[Import] [Delete]
Installation
composer require hdaklue/actioncrumb
Requirements: PHP 8.2+, Laravel 11+, Livewire 3+, Filament Actions 4+, Tailwind CSS, Alpine.js
Basic Usage
1. Create a Breadcrumb Component
<?php namespace App\Livewire\Admin; use Hdaklue\Actioncrumb\Components\WireCrumb; use Hdaklue\Actioncrumb\{Step, Action}; class UsersManagement extends WireCrumb { protected function actioncrumbs(): array { return [ Step::make('Dashboard') ->icon('heroicon-o-home') ->url('/dashboard'), Step::make('Users') ->icon('heroicon-o-users') ->current() ->actions([ Action::make('Export') ->icon('heroicon-o-arrow-down-tray') ->execute(fn() => $this->exportUsers()), Action::make('Import') ->icon('heroicon-o-arrow-up-tray') ->route('users.import'), ]) ]; } public function exportUsers() { // Your logic here $this->dispatch('notify', 'Users exported!'); } }
2. Add to Your Blade Template
<div> {!! $this->renderActioncrumbs() !!} <!-- Your page content --> </div>
3. Include Required CSS/JS
Add to your resources/css/app.css
(Tailwind 4):
@import "../../../../vendor/hdaklue/actioncrumb/resources/css/actioncrumb.css";
Add to your layout:
<!-- Tailwind CSS (required) --> @vite(['resources/css/app.css']) <!-- Alpine.js (required for dropdowns) --> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
Key Features
Steps with Actions
Step::make('Users') ->icon('heroicon-o-users') ->route('users.index') ->actions([ Action::make('Export')->execute(fn() => $this->export()), Action::make('Settings')->url('/settings'), ])
Current Step
Step::make('Current Page')->current(true)
Dynamic Actions
Step::make('User') ->actions([ Action::make('Edit') ->visible(fn() => auth()->user()->can('edit-users')) ->execute(fn() => $this->editUser()), ])
Action Types
// Execute callback Action::make('Delete')->execute(fn() => $this->delete()) // Navigate to URL Action::make('Settings')->url('/admin/settings') // Navigate to route Action::make('Users')->route('users.index', ['type' => 'active']) // Using WireAction with Filament actions (recommended) $wireAction = WireAction::make('test')->livewire($this); $action = $wireAction->execute('testAction'); // Triggers mountAction('testAction') // Use $action in Step.actions() array
Advanced Usage
Two Component Types
Breadcrumb Navigation Components - Use WireCrumb
base class:
use Hdaklue\Actioncrumb\Components\WireCrumb; class UserManagement extends WireCrumb { protected function actioncrumbs(): array { return [ Step::make('Dashboard')->url('/dashboard'), Step::make('Users')->current(), ]; } }
Individual Components - Use HasActionCrumbs
trait:
use Hdaklue\Actioncrumb\Traits\HasActionCrumbs; class UserComponent extends Component { use HasActionCrumbs; protected function actioncrumbs(): array { return [ Action::make('Edit')->execute(fn() => $this->edit()), Action::make('Delete')->execute(fn() => $this->delete()), ]; } }
Filament Actions Integration
Using WireAction for executing Filament Actions:
use Filament\Actions\Action as FilamentAction; use Hdaklue\Actioncrumb\Action; class UserWireStep extends Component implements HasActions { use HasActionCrumbs; use InteractsWithActions; public function editAction(): FilamentAction { return FilamentAction::make('edit') ->form([ TextInput::make('name')->required(), TextInput::make('email')->email(), ]) ->action(function (array $data) { $this->user->update($data); }); } // Option 1: Direct Action objects with mountAction protected function actioncrumbs(): array { return [ Action::make('Edit') ->icon('heroicon-o-pencil') ->execute(fn() => $this->mountAction('edit')), Action::make('Delete') ->icon('heroicon-o-trash') ->execute(fn() => $this->mountAction('delete')), ]; } // Option 2: Using WireAction for Filament integration protected function actioncrumbsWithWireAction(): array { $wireAction = WireAction::make('user-actions')->livewire($this); return [ $wireAction->execute('edit'), // Calls mountAction('edit') $wireAction->execute('delete'), // Calls mountAction('delete') ]; } }
Configuration
ActionCrumb provides a fluent configuration API to customize appearance and behavior globally.
Global Configuration
Configure ActionCrumb in your AppServiceProvider
:
<?php namespace App\Providers; use Illuminate\Support\ServiceProvider; use Hdaklue\Actioncrumb\Configuration\ActioncrumbConfig; use Hdaklue\Actioncrumb\Enums\{ThemeStyle, SeparatorType, TailwindColor}; class AppServiceProvider extends ServiceProvider { public function boot(): void { ActioncrumbConfig::make() ->themeStyle(ThemeStyle::Rounded) // Simple, Rounded, Square ->separatorType(SeparatorType::Chevron) // Chevron, Line, Backslash ->primaryColor(TailwindColor::Blue) // Any Tailwind color ->secondaryColor(TailwindColor::Gray) // Secondary accents ->background(true) // Enable/disable subtle backgrounds (default: true) ->enableDropdowns(true) // Enable/disable dropdowns ->compact(false) // Compact spacing ->compactMenuOnMobile(true) // Mobile-specific behavior ->bind(); } }
Theme Styles
Simple - Clean, minimal design:
ActioncrumbConfig::make()->themeStyle(ThemeStyle::Simple)
Rounded - Modern pill design:
ActioncrumbConfig::make()->themeStyle(ThemeStyle::Rounded)
Square - Bold geometric design:
ActioncrumbConfig::make()->themeStyle(ThemeStyle::Square)
Available Colors
All Tailwind colors are supported:
// Primary colors (current step, active states) ->primaryColor(TailwindColor::Blue) ->primaryColor(TailwindColor::Purple) ->primaryColor(TailwindColor::Green) // Secondary colors (other steps, borders) ->secondaryColor(TailwindColor::Gray) ->secondaryColor(TailwindColor::Slate) ->secondaryColor(TailwindColor::Zinc)
Separator Types
Choose between different separator styles:
// Chevron arrows (default) ->separatorType(SeparatorType::Chevron) // Vertical lines ->separatorType(SeparatorType::Line) // Forward slash ->separatorType(SeparatorType::Backslash)
Background Configuration
Control breadcrumb item backgrounds (enabled by default):
// Enable subtle backgrounds for breadcrumb items (default) ->background(true) // Disable backgrounds for a minimal, text-only appearance ->background(false)
When enabled, breadcrumb items display subtle background colors based on the configured primaryColor
and secondaryColor
, creating a more defined breadcrumb appearance. When disabled, only text colors are applied for a cleaner, minimal look.
Mobile Configuration
Control mobile behavior:
// Show full breadcrumb with horizontal scroll on mobile ->compactMenuOnMobile(false) // Show compact menu with hamburger on mobile ->compactMenuOnMobile(true)
Complete Configuration Example
ActioncrumbConfig::make() ->themeStyle(ThemeStyle::Rounded) ->separatorType(SeparatorType::Chevron) ->primaryColor(TailwindColor::Purple) ->secondaryColor(TailwindColor::Slate) ->enableDropdowns(true) ->compact(false) ->compactMenuOnMobile(true) ->bind();
Styling
Publish views for customization:
php artisan vendor:publish --tag=actioncrumb-views
Tailwind Configuration
Add to your tailwind.config.js
:
module.exports = { content: [ './vendor/hdaklue/actioncrumb/resources/views/**/*.blade.php', ], // ... }
Common Patterns
User Management Breadcrumb
class UserManagement extends WireCrumb { protected function actioncrumbs(): array { return [ Step::make('Dashboard')->url('/dashboard'), Step::make('Users')->route('users.index')->actions([ Action::make('Create User')->route('users.create'), Action::make('Export')->execute(fn() => $this->export()), ]), Step::make($this->user->name)->current(true), ]; } }
Permission-Based Actions in Step Components
class UserStepComponent extends Component { use HasActionCrumbs; protected function actioncrumbs(): array { return [ Action::make('Edit') ->visible(fn() => auth()->user()->can('edit-users')) ->execute(fn() => $this->edit()), Action::make('Delete') ->visible(fn() => auth()->user()->can('delete-users')) ->execute(fn() => $this->delete()), ]; } }
Troubleshooting
Icons not showing?
composer require blade-ui-kit/blade-heroicons
Dropdowns not working? Make sure Alpine.js is loaded:
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
Styling issues? Ensure Tailwind processes the package views:
// tailwind.config.js content: [ './vendor/hdaklue/actioncrumb/resources/views/**/*.blade.php', ]
License
The MIT License (MIT). See License File for more information.