A comprehensive and flexible Laravel navigation package that provides beautiful, responsive navigation components with Alpine.js interactions and Tailwind CSS styling. Perfect for building modern Laravel applications with professional navigation experiences.
- PHP 8.3+
- Laravel 10.x, 11.x, or 12.x
- Alpine.js (included with Livewire)
- Tailwind CSS
Install the package via Composer:
composer require fuelviews/laravel-navigationRun the install command for guided setup:
php artisan navigation:installThis will:
- Publish the configuration file
- Publish view files for customization
- Provide setup instructions
Alternatively, you can manually publish components:
# Publish configuration
php artisan vendor:publish --tag="navigation-config"
# Publish views (optional)
php artisan vendor:publish --tag="navigation-views"
# Publish service provider for advanced customization (optional)
php artisan vendor:publish --tag="laravel-package-tools-service-provider"The package uses a comprehensive configuration file located at config/navigation.php:
Define your navigation structure with support for simple links and dropdown menus:
'navigation' => [
// Simple link
[
'type' => 'link',
'position' => 0,
'name' => 'Home',
'route' => 'home',
],
// Dropdown menu
[
'type' => 'dropdown',
'position' => 1,
'name' => 'Services',
'links' => [
[
'name' => 'Web Development',
'route' => 'services.web',
],
[
'name' => 'Mobile Apps',
'route' => 'services.mobile',
],
],
],
],// logo config
'default_logo' => '',
'transparency_logo' => '',
// navigation config
'top_nav_enabled' => false,
'logo_swap_enabled' => true,
'transparent_nav_background' => true,
// logo shape config: 'horizontal', 'vertical', or 'square'
'default_logo_shape' => 'square',
'transparency_logo_shape' => 'horizontal',Define routes that should have a "scrolled" appearance from page load:
'pre_scrolled_routes' => [
'careers',
'contact',
'services',
'forms.*',
'sabhero-articles.*',
'portfolio',
'privacy-policy',
'terms-and-conditions',
],<!-- Complete desktop navigation -->
<x-navigation::desktop.desktop-navigation />
<!-- Individual dropdown button -->
<x-navigation::desktop.desktop-dropdown-button
name="Services"
:links="$serviceLinks"
/><!-- Mobile navigation menu -->
<x-navigation::mobile.mobile-navigation />
<!-- With custom background classes -->
<x-navigation::mobile.mobile-navigation
:bg-class="['bg-blue-50', 'bg-blue-100']"
/><!-- Smart navigation that adapts based on route -->
<x-navigation::navigation-scroll />
<!-- With transparency control -->
<x-navigation::navigation-scroll :is-transparent="false" /><!-- Top bar for contact info -->
<x-navigation::top-bar />
<!-- Footer with navigation links -->
<x-navigation::footer.footer />
<!-- Spacing component -->
<x-navigation::spacer />
<!-- Phone button -->
<x-navigation::phone-button />
<!-- Logo component -->
<x-navigation::logo />
<!-- Social media icons -->
<x-navigation::social.facebook />
<x-navigation::social.instagram />
<x-navigation::social.linkedin />
<x-navigation::social.youtube />Here's a complete navigation setup:
<!-- resources/views/layouts/app.blade.php -->
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<!-- Your head content -->
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
<!-- Top bar with contact info -->
@if(Navigation::isTopNavEnabled())
<x-navigation::top-bar />
@endif
<!-- Main navigation -->
<x-navigation::navigation-scroll>
<!-- Desktop navigation -->
<div class="hidden md:flex">
<x-navigation::logo />
<x-navigation::desktop.desktop-navigation />
<x-navigation::phone-button />
</div>
<!-- Mobile navigation toggle -->
<div class="md:hidden">
<x-navigation::hamburger-button />
</div>
</x-navigation::navigation-scroll>
<!-- Mobile navigation menu -->
<x-navigation::mobile.mobile-navigation />
<!-- Page content -->
<main>
{{ $slot }}
</main>
<!-- Footer -->
<x-navigation::footer.footer />
</body>
</html>Add the package views to your tailwind.config.js:
module.exports = {
content: [
'./resources/**/*.blade.php',
'./resources/**/*.js',
'./vendor/fuelviews/laravel-navigation/resources/**/*.blade.php',
],
// ... rest of your config
}Access navigation data programmatically:
use Fuelviews\Navigation\Facades\Navigation;
// Get all navigation items
$items = Navigation::getNavigationItems();
// Check if dropdown route is active
$isActive = Navigation::isDropdownRouteActive($dropdownLinks);
// Get configuration values
$logo = Navigation::getDefaultLogo();
$phone = Navigation::getPhone();
$isTransparent = Navigation::isTransparentNavBackground();
// Check route states
$isPreScrolled = Navigation::isPreScrolledRoute();
$preScrolledString = Navigation::getPreScrolledRoute(); // 'true' or 'false'View all configured navigation items:
php artisan navigation:listOutput:
Navigation Items:
+----------+----------+---------+--------------+
| Position | Type | Name | Route/Links |
+----------+----------+---------+--------------+
| 0 | link | Home | home |
| 1 | dropdown | Services| 3 links |
| 2 | link | About | about |
+----------+----------+---------+--------------+
Validate your navigation configuration:
php artisan navigation:validateThis command checks for:
- Required fields (type, position, name)
- Valid navigation types
- Route existence
- Duplicate positions
- Dropdown structure integrity
Add navigation items programmatically:
// In a service provider
config([
'navigation.navigation' => array_merge(
config('navigation.navigation'),
[
[
'type' => 'link',
'position' => 99,
'name' => 'Admin',
'route' => 'admin.dashboard',
]
]
)
]);Extend the package with your own components:
// Create custom component
class CustomNavigationLink extends Component
{
public function render()
{
return view('components.custom-navigation-link');
}
}
// Register in AppServiceProvider
Blade::component('custom-nav-link', CustomNavigationLink::class);The package includes comprehensive tests. Run them with:
# In the package directory
composer test
# Code style
composer formatTest navigation in your application:
// Feature test example
public function test_navigation_renders_correctly()
{
$response = $this->get('/');
$response->assertSeeLivewire(DesktopNavigation::class);
$response->assertSee('Home');
$response->assertSee('Services');
}<!-- Override dropdown component -->
<x-navigation::desktop.desktop-dropdown align="right" width="48">
<x-slot name="trigger">
<button class="custom-dropdown-button">
Services
</button>
</x-slot>
<x-slot name="content">
<!-- Custom dropdown content -->
</x-slot>
</x-navigation::desktop.desktop-dropdown>We welcome contributions! Please see CONTRIBUTING.md for details.
git clone https://github.com/fuelviews/laravel-navigation.git
cd laravel-navigation
composer install
composer testPlease see CHANGELOG for more information on what has changed recently.
Please review our security policy on how to report security vulnerabilities.
The MIT License (MIT). Please see License File for more information.
Built with ❤️ by the Fuelviews team