Last Updated:

Laravel: creating breadcrumbs

Hello. In this article, we will talk about breadcrumbs in Laravel. Breadcrumbs help the visitor to navigate where on the site he is, help to build navigation. And also useful for SEO. Breadcrumbs in Laravel can be added manually or generated using a plugin. Next, we'll look at how to do it.

And so. I'm assuming you already have Laravel installed. I have Laravel 5.7.26 installed

The server is configured.

Let's create some grooves.

Step 1. Adding routers to Laravel

Open the routes/web.php file and add the routers:

…

Route::get('/profile', function () {

return view('profile');

});

 

Route::get('/profile/accounts', function () {

return view('accounts');

});

 

Route::get('/profile/accounts/add', function () {

return view('accounts_add');

});

 

Route::get('/profile/accounts/edit/{id}', function ($id) {

return view('accounts_edit',['id' => $id]);

});

And, so:

  • /profile is a link to the profile, it corresponds to the profile pack
  • /profile/accounts is a link to the list of accounts, it corresponds to the accounts pack
  • /profile/accounts/add is a link to add an account, it corresponds to a pack accounts_add
  • /profile/accounts/edit/{$id} is a link to editing the account, it corresponds to the pack accounts_edit

We're not going to do logic, so we're not going to write controllers, and we're going to call the packs right out of the routers. This is not entirely correct, but it can be done this way and in our case it is justified.

Now let's create the packs.

Step 2. Adding packs.

Let's create a layout so that then all of our packs inherit it. Create layout.blade.php in the resources/views directory:

<!doctypehtml>

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>

<metacharset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

&nbsp;

<title>Laravel</title>

&nbsp;

<!-- Fonts -->

<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet" type="text/css">

&nbsp;

<!-- Styles -->

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin>

<style>

html, body {

background-color: #fff;

color: #636b6f;

font-family: 'Nunito', sans-serif;

font-weight: 200

height: 100vh;

margin: 0;

}

&nbsp;

.full-height {

height: 100vh;

}

&nbsp;

.flex center {

align-items: center;

display:flex;

justify-content: center;

}

&nbsp;

.position-ref {

position: relative;

}

&nbsp;

.top-right {

position: absolute;

right: 10px;

top: 18px;

}

&nbsp;

.content {

text-align: center;

}

&nbsp;

.title {

font-size: 84px;

}

&nbsp;

.links > a {

color: #636b6f;

padding: 025px;

font-size: 13px;

font-weight: 600

letter-spacing: .1rem;

text-decoration: none;

text-transform: uppercase;

}

&nbsp;

.m-b-md {

margin-bottom: 30px;

}

</style>

</head>

<body>

<div class="flex-center position-ref full-height">

<div class="top right links">

<a href="{{ url('/profile') }}">Profile</a>

<a href="{{ url('/profile/accounts') }}">Accounts</a>

<a href="{{ url('/profile/accounts/add') }}">Add account</a>

</div>

&nbsp;

<div class="content">

@yield("content")

</div>

</div>

</body>

</html>

Создаем вьюшку profile, в каталоге resources/views profile.blade.php

@extends('layout')

&nbsp;

@section('content')

<div class="title m-b-md">  Profile Page  </div>

@endsection

Create a binder for accounts. To do this, create a file accounts.blade.php in the resources/views directory

@extends('layout')

&nbsp;

@section('content')

<div class="title m-b-md">  Profile Page  </div>

@endsection

Create a binder to add invoices. To do this, create a file accounts_add.blade.php in the resources/views directory

@extends('layout')

&nbsp;

@section('content')

<div class="title m-b-md">  Profile Page  </div>

@endsection

And the last page, the invoice editing page.

To do this, create a file accounts_edit.blade.php in the resources/views directory

@extends('layout')

&nbsp;

@section('content')

<div class="title m-b-md">  Profile Page {{ id }}

</div>

@endsection

Notice the parameter passed in the address.

It's cool. We created the routs and bindweeds. It's time for breadcrumbs.

Step 3. Add breadcrumbs by hand

Open our profile.blade .php and change the code in it:

@section('content')

<nav aria-label="breadcrumb">

<ol class="breadcrumb">

<li class="breadcrumb-item active" aria-current="page">Профиль</li>

</ol>

</nav>

<div class="title m-b-md">  Profile Page  </div>

@endsection

Great, now add the bread crumbs to the accounts_add.blade.php

@extends('layout')

&nbsp;

@section('content')

<nav aria-label="breadcrumb">

<ol class="breadcrumb">

<li class="breadcrumb-item"><a href="{{ url('/profile') }}">Profile</a></li>

<li class="breadcrumb-item active" aria-current="page">Счета</li>

</ol>

</nav>

<div class="title m-b-md">

Страница счетов

</div>

@endsection

Now add crumbs to the accounts_add.blade.php

@extends('layout')

&nbsp;

@section('content')

<nav aria-label="breadcrumb">

<ol class="breadcrumb">

<li class="breadcrumb-item"><a href="{{ url('/profile') }}">Profile</a></li>

<li class="breadcrumb-item"><a href="{{ url('/profile/accounts') }}">Accounts</a></li>

<li class="breadcrumb-item active" aria-current="page">Add account</li>

</ol>

</nav>

<div class="title m-b-md">

Add account page

</div>

@endsection

And add crumbs to the accounts_edit.blade invoice editing.php

@extends('layout')

&nbsp;

@section('content')

<nav aria-label="breadcrumb">

<ol class="breadcrumb">

<li class="breadcrumb-item"><a href="{{ url('/profile') }}">Profile</a></li>

<li class="breadcrumb-item"><a href="{{ url('/profile/accounts') }}">Accounts</a></li>

<li class="breadcrumb-item active" aria-current="page">Edit account</li>

</ol>

</nav>

<div class="title m-b-md">

Edit account {{ $id }}

</div>

@endsection  

All bread crumbs work, but adding to the manual is not very convenient. We only have four packs, and if there are hundreds?

This is where various bags for generating bread crumbs come to our rescue. And we'll use the davejamesmiller/laravel-breadcrumbs package.

Step 4. Installing and configuring the davejamesmiller/laravel-breadcrumbs package

To install the package, use composer:

composer require davejamesmiller/laravel-breadcrumbs

Then run:

php artisan vendor:publish

And choose our package. In the folder with config configurations, the breadcrumbs file will be copied.php

In this file we can customize our breadcrumbs. The file has very detailed comments. Therefore, setting up bread crumbs will not cause problems.

Step 5. Using the laravel-breadcrumbs package

In order to start using laravel-breadcrumbs, you need to create a breadcrumbs file in the routes folder (where the routers are stored.php

And let's add to it:

Breadcrumbs::register('profile', function ($breadcrumbs) {

$breadcrumbs->push('Profile', url('/profile'));

});

Here we register using the register method a chain of bread crumbs under the name profile. And using the push method, add a "Profile" element with a url('/profile') link

Now, in the view itself, we have to derive a chain of our breadcrumbs. To go to our view: profile.blade.php and modify the code:

@extends('layout')

&nbsp;

@section('content')

{{ Breadcrumbs::render('profile') }}

&nbsp;

<div class="title m-b-md">  Profile Page  </div>

@endsection

Here, using the render method, we render a chain of bread crumbs by her name. Let's see what has changed in our display:

Nothing has changed. Let's add breadcrumbs to the billing page. To do this, open the routes/breadcrumbs file.php and add the code of our file:

Breadcrumbs::for('accounts', function ($breadcrumbs) {

$breadcrumbs->parent('profile');

$breadcrumbs->push('Accounts', url('/profile/account'));

});

And in the view it is necessary to derive this chain:

resources/view/accounts.blade.php

@extends('layout')

&nbsp;

@section('content')

{{ Breadcrumbs::render('accounts') }}

<div class="title m-b-md">

Profile Page

</div>

@endsection

Ok, now let's make breadcrumbs for the add bill page. To do this, add to route/breadcrumbs.php

Breadcrumbs::for('accounts_add', function ($breadcrumbs) {

$breadcrumbs->parent('accounts');

$breadcrumbs->push('Adding an account', url('/profile/account/add'));

});

And let's add a render of this chain to the view.

resources/view/accounts_add.blade.php

@extends('layout')

&nbsp;

@section('content')

{{ Breadcrumbs::render('accounts_add') }}

<div class="title m-b-md">  Add account page  </div>

@endsection

Similarly, we can add breadcrumbs for other pages. As you can see, we have significantly reduced the code in the packs. Yes, chains have become easier to add.

If we need to pass parameters to the chain, the packet easily allows us to do so. For example, we have a category where the name of the category we have to pass as a parameter.

Breadcrumbs::register('category', function ($breadcrumbs, $category) {

$breadcrumbs->parent('home');

$breadcrumbs->push($category->name, route('category', ['name' => $category ->name]));

});

And in the rendering of breadcrumbs itself, we have to pass the parameter $category

{{ Breadcrumbs::render('category', $category) }}

That is, we pass the name of the chain "category" and the parameter "$category".

We can also pass several parameters. For example, we have an article that is in a category. Where the category name and article name we should pass into breadcrumbs:

Breadcrumbs::register('category', function ($breadcrumbs, $category) {

$breadcrumbs->parent('home');

$breadcrumbs->push($category->name, route('category', ['name' => $category ->name]));

});

Breadcrumbs::register('article', function ($breadcrumbs, $category, $article) {

$breadcrumbs->parent('article');

$breadcrumbs->push($article->name, route('article', ['name' => $article ->name]));

});

Well, the rendering itself:

{{ Breadcrumbs::render('article', $category, $article) }}

Well, that's it.