GithubHelp home page GithubHelp logo

stonec0der / breadcrumbs Goto Github PK

View Code? Open in Web Editor NEW

This project forked from tabuna/breadcrumbs

0.0 0.0 0.0 78 KB

Laravel Breadcrumbs - An easy way to add breadcrumbs to your @Laravel app.

Home Page: https://github.com/tabuna/breadcrumbs

License: MIT License

PHP 98.12% HTML 1.88%

breadcrumbs's Introduction

Laravel Breadcrumbs

Tests codecov Total Downloads Latest Version on Packagist

Introduction

Breadcrumbs display a list of links indicating the position of the current page in the whole site hierarchy. For example, breadcrumbs like Home / Sample Post / Edit means the user is viewing an edit page for the "Sample Post." He can click on "Sample Post" to view that page or click on "Home" to return to the homepage.

Home / Sample Post / Edit

This package for the Laravel framework will make it easy to build breadcrumbs in your application.

Installation

Run this at the command line:

$ composer require tabuna/breadcrumbs

This will update composer.json and install the package into the vendor/ directory.

Define your breadcrumbs

Now you can define breadcrumbs directly in the route files:

use Tabuna\Breadcrumbs\Trail;

// Home
Route::get('/', fn () => view('home'))
    ->name('home')
    ->breadcrumbs(fn (Trail $trail) =>
        $trail->push('Home', route('home'))
);

// Home > About
Route::get('/about', fn () => view('home'))
    ->name('about')
    ->breadcrumbs(fn (Trail $trail) =>
        $trail->parent('home')->push('About', route('about'))
);

You can also get arguments from the request:

Route::get('/category/{category}', function (Category $category){
    //In this example, the category object is your Eloquent model.
    //code...
})
    ->name('category')
    ->breadcrumbs(fn (Trail $trail, Category $category) =>
        $trail->push($category->title, route('category', $category->id))
);

Route detection

The package tries to reduce the number of lines needed. For this, you can skip passing the results of the route() methods. The following two declarations will be equivalent:

Route::get('/', fn () => view('home'))
    ->name('home')
    ->breadcrumbs(fn (Trail $trail) =>
        $trail->push('Home', route('home'))
);

Route::get('/', fn () => view('home'))
    ->name('home')
    ->breadcrumbs(fn (Trail $trail) =>
        $trail->push('Home', 'home')
);

Like to use a separate route file?

You can do this simply by adding the desired file to the service provider

namespace App\Providers;

use Illuminate\Support\ServiceProvider;

class BreadcrumbsServiceProvider extends ServiceProvider
{
    /**
     * Bootstrap the application events.
     *
     * @return void
     */
    public function boot()
    {
        require base_path('routes/breadcrumbs.php');
    }
}

Then it will be your special file in the route directory:

// routes/breadcrumbs.php


// Photos
Breadcrumbs::for('photo.index', fn (Trail $trail) =>
    $trail->parent('home')->push('Photos', route('photo.index'))
);

Route resource

When using resources, a whole group of routes is declared for which you must specify values manually

// routes/web.php

Route::resource('photos', 'PhotoController');

It’s better to specify this in service providers, since route files can be cached

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Tabuna\Breadcrumbs\Breadcrumbs;
use Tabuna\Breadcrumbs\Trail;

class BreadcrumbsServiceProvider extends ServiceProvider
{
    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        Breadcrumbs::for('photos.index', fn (Trail $trail) =>
             $trail->push('Photos', route('home'))
        );
        
        Breadcrumbs::for('photos.create', fn (Trail $trail) =>
            $trail
                ->parent('photos.index', route('photos.index'))
                ->push('Add new photo', route('home'))
        );
    }
}

Output the breadcrumbs use Blade Component

You can use the output component:

<ul>
    <x-tabuna-breadcrumbs/>
</ul>

To define classes of list items, you can specify:

<x-tabuna-breadcrumbs
  class="item"
  active="active"
/>

You can also pass parameters:

<x-tabuna-breadcrumbs
    parameters="['value 1', 'value 2', 'value 3']"
/>

And call named routes explicitly:

<x-tabuna-breadcrumbs
    route="static"
/>

Output the breadcrumbs use Blade view

In order to display breadcrumbs on the desired page, simply call:

@if(Breadcrumbs::has())
    @foreach (Breadcrumbs::current() as $crumbs)
        @if ($crumbs->url() && !$loop->last)
            <li class="breadcrumb-item">
                <a href="{{ $crumbs->url() }}">
                    {{ $crumbs->title() }}
                </a>
            </li>
        @else
            <li class="breadcrumb-item active">
                {{ $crumbs->title() }}
            </li>
        @endif
    @endforeach
@endif

And results in this output:

Home / About

Credits

For several years, I successfully used the Dave James Miller package to solve my problems, but he stopped developing and supporting it. After a long search for alternatives, I liked the Dwight Watson package, but the isolation of breadcrumbs from the announcement of the routes did not give me rest. That's why I created this package. It uses the code of both previous packages.

License

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

breadcrumbs's People

Contributors

juliomotol avatar tabuna avatar taylorotwell avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.