Navsmith is a lightweight, unintrusive Laravel package for easily creating navigation links out of routes you define. It's particularly useful for SPA-like sites.
Just define your routes using the navsmith method and give them route names you'd like to use in your display...
Route::navsmith(function () {
Route::get('/', Welcome::class)->name('home');
Route::get('/about', About::class)->name('about');
Route::get('/contact', Contact::class)->name('contact');
});Include the x-navsmith Blade component...
<ul>
<x-navsmith/>
</ul>And you get display-ready HTML links.
<ul>
<li><a href="https://mysite.com">Home</a>
</li>
<li><a href="https://mysite.com/about">About</a>
</li>
<li><a href="https://mysite.com/contact">Contact</a>
</li>
</ul>Using the current attribute on the component, you can give the links different styling according to whether
they are the currently-visited page (either CSS styles or class-based styles) and get a SPA-like experience:
Class-based styles (e.g. TailwindCSS)
<!-- This... -->
<x-navsmith class="text-black" current="font-bold"/>
<!-- Will render the link corresponding to the current page, like this... -->
<a href="https://mysite.com" class="text-black font-bold">Home</a>CSS styles
<!-- This... -->
<x-navsmith style="color: rgb(0 0 0);" current="font-weight: 700;"/>
<!-- Will render the link corresponding to the current page, like this... -->
<a href="https://mysite.com" style="color: rgb(0 0 0); font-weight: 700;">Home</a>You can also pass through any attributes to your links. This is particularly useful if you're
using Livewire and want to take advantage of its SPA-like navigation features by
using wire:navigate.
<!-- This... -->
<x-navsmith wire:navigate/>
<!-- Will render each of your links with the same attribute... -->
<a href="https://mysite.com" wire:navigate>Home</a>Furthermore, a navsmith_route helper function is provided so that you can refer to your Navsmith routes elsewhere in
your code without having to remember the specific naming prefix applied.
Given a route definition like this
Route::navsmith(function () {
Route::get('/a-cumbersome-url', Contact::class)->name('contact');
});And a call to navsmith_route like this
<p>Please visit the <a href="{{ navsmith_route('contact') }}">contact page</a> to send us an e-mail.</p>The HTML will render like this
<p>Please visit the <a href="https://mysite.com/a-cumbersome-url">contact page</a> to send us an e-mail.</p>Navsmith requires Laravel 10 or 11 and PHP 8.2+.
You can install the package via composer:
composer require codelinde/navsmithYou can publish the views to make any desired alterations by running the following command.
php artisan vendor:publish --tag="navsmith-views"composer testPlease see CHANGELOG for more information on what has changed recently.
Please see CONTRIBUTING for details.
Please review our security policy on how to report security vulnerabilities.
The MIT License (MIT). Please see License File for more information.