CakePHP-4-Breadcrumbs-Helper-Tutorial

CakePHP 4 Breadcrumbs Helper

by
Reading Time: 8 minutes
4,327 Views

Helpers are the standalone components like classes for the presentation layer of the application. They contain logic to accomplish the task. There are several helpers by default available in CakePHP 4. Breadcrumbs Helper is one of them. Inside this article we will see about complete tutorial over CakePHP 4 Breadcrumbs Helper.

Let’s get started.

CakePHP 4 Installation

To create a CakePHP project, run this command into your shell or terminal. Make sure composer should be installed in your system.

$ composer create-project --prefer-dist cakephp/app:~4.0 mycakephp

Above command will creates a project with the name called mycakephp.

Types of Helpers

According to the official documentation of CakePHP 4, we have these following helpers available.

  • Breadcrumbs Helper
  • Flash Helper
  • Form Helper
  • HTML Helper
  • URL Helper
  • Text Helper
  • Number Helper
  • Paginator Helper

Also in some cases if we wish to create our own custom helper we can create that. Each helpers in CakePHP has their own working principles and functionality.

About Breadcrumbs Helper

Breadcrumbs Helper provides an interface which tracks the path of pages. By the help of this we can generate breadcrumbs node to pages trails.

Helper file we can find at this path –

[ProjectFolder]/vendor/cakephp/cakephp/src/View/Helper/BreadcrumbsHelper.php

Inside this, we can see it’s a class which extends Parent class Helper

class BreadcrumbsHelper extends Helper {}

We can add a crumb into the list using the add() method. Inside this add method we need to pass three arguments:

  • title The label or string value of the crumb
  • url This indicates the link of the label. When we click on the label it will redirect to that link.
  • options An array of attributes

Let’s use it in application.

How to load & Use ?

Open parent View class file i.e AppView.php which is inside /src/View/AppView.php folder.

class AppView extends View
{
    public function initialize(): void
    {
        $this->loadHelper('Breadcrumbs');
    }
}

This is loading of helper globally, meaning the entire application can use it. Other wise for specific View or controller we need to declare into individual files.

We have 3 methods available to use add(), prepend(), render().

Open any application view file.

// It will create li node of Home and adds a link to dashboard method of 
// Home Controller

$this->Breadcrumbs->add(
    "Home",
    ["controller" => "Home", "action" => "dashboard"]
);
// <li> <a href="[base_url]/home/dashboard"> Home </a> </li>

// li node of Student as anchor text and student method of Home Controller 
// is the link and rest for li we have a class and data-id attribute
$this->Breadcrumbs->add(
    "Student",
    ["controller" => "Home", "action" => "student"],
    [
        "class" => "add-student-class",
        "data-id" => 21
    ]
);

// <li class="add-student-class" data-id = "21"> <a href="[base_url]/home/student"> Student </a> </li>

Add two Crumb nodes via add() method.

// 2 li node via this add()
$this->Breadcrumbs->add([
    [
        "title" => "Home",
        "url" => ["controller" => "Home", "action" => "dashboard"]
    ],
    [
        "title" => "Add Student",
        "url" => ["controller" => "Home", "action" => "student"]
    ]
]);

If in case we need to add more crumb trails into the list, we need to prepend() method.

// This code will add or say append First Page anchor into li node into the list
$this->Breadcrumbs->prepend(
    "First Page",
    ["controller" => "Home", "action" => "first_page"]
);

Now, finally we have prepared our breadcrumbs trails. Next we need to load or redner to front end.

So to load Bread crumb trails we need to use render() method. This is going to wrap all trail elements into ul element of HTML.

echo $this->Breadcrumbs->render([
    "class" => "my-own-trail"
]);
// It will wrap entire trail into <ul> ... </ul> element

Wrapping all code into single and when we execute it –

<?php 

$this->Breadcrumbs->add([
    [
        "title" => "Home",
        "url" => ["controller" => "Home", "action" => "dashboard"]
    ],
    [
        "title" => "Add Student",
        "url" => ["controller" => "Home", "action" => "student"]
    ]
]);

$this->Breadcrumbs->add(
    "Home",
    ["controller" => "Home", "action" => "dashboard"]
);

$this->Breadcrumbs->add(
    "Student",
    ["controller" => "Home", "action" => "student"],
    [
        "class" => "add-student-class",
        "data-id" => 21,
        "innerAttrs" => [
            "class" => "first-child",
            "id" => "first-id"
        ]
    ]
);

$this->Breadcrumbs->add(
    "Add Student",
    ["controller" => "Home", "action" => "add_student"]
);

$this->Breadcrumbs->prepend(
    "First Page",
    ["controller" => "Home", "action" => "first_page"]
);

echo $this->Breadcrumbs->render([
    "class" => "my-own-trail"
]);
?>

Output at frontend of these trails as –

<ul class="my-own-trail">
    <li><a href="[base_url]/home/first-page">First Page</a></li>
    <li><a href="[base_url]/cakeapp/home/dashboard">Home</a></li>
    <li><a href="[base_url]/cakeapp/home/student">Add Student</a></li>
    <li><a href="[base_url]/cakeapp/home/dashboard">Home</a></li>
    <li class="add-student-class" data-id="21">
        <a href="[base_url]/home/student" class="first-child" id="first-id">
            Student
        </a>
    </li>
    <li><a href="[base_url]/home/add-student">Add Student</a></li>
</ul>

More advance in Breadcrumbs Helper

There are also several settings we have like template modification, adding attributes to anchor tag etc.

For setting custom template for crumb trail wrapper, we have simply code to st a template for that.

//Add this code at the top
$this->Breadcrumbs->setTemplates([
    'wrapper' => '<nav class="breadcrumbs"><ul{{attrs}}>{{content}}</ul></nav>',
]);

// Outputs
// <nav class="breadcrumbs"> <ul> ... </ul>  </nav>

CakePHP 4 has a default template for breadcrumb element.

[
    'wrapper' => '<ul{{attrs}}>{{content}}</ul>',
    'item' => '<li{{attrs}}><a href="{{url}}"{{innerAttrs}}>{{title}}</a></li>{{separator}}',
    'itemWithoutLink' => '<li{{attrs}}><span{{innerAttrs}}>{{title}}</span></li>{{separator}}',
    'separator' => '<li{{attrs}}><span{{innerAttrs}}>{{separator}}</span></li>'
]

{{attrs}}, {{url}}, {{innerAttrs}} these are placeholders which by default available. It is automatically taken care by Breadcrumb helper.

If we want to add our custom placeholder to this template syntax also we can add that.

$this->Breadcrumbs->setTemplates([
    'item' => '<li{{attrs}}>{{icon}}<a href="{{url}}"{{innerAttrs}}>{{title}}</a></li>{{separator}}'
]);

{{icon}} is custom placeholder, so to place values we have to write like this.

$this->Breadcrumbs->add(
    'Student',
    ['controller' => 'Home', 'action' => 'index'],
    [
        'templateVars' => [
            'icon' => '<i class="fa fa-user"></i>' // this is the custom icon we have added
        ]
    ]
);

For more information you can refer to this official document. Successfully, we have completed the article over Breadcrumbs helper of CakePHP 4.

We hope this article helped you to learn CakePHP 4 Breadcrumbs Helper in a very detailed way.

Online Web Tutor invites you to try Skillshike! Learn CakePHP, Laravel, CodeIgniter, Node Js, MySQL, Authentication, RESTful Web Services, etc into a depth level. Master the Coding Skills to Become an Expert in PHP Web Development. So, Search your favourite course and enroll now.

If you liked this article, then please subscribe to our YouTube Channel for PHP & it’s framework, WordPress, Node Js video tutorials. You can also find us on Twitter and Facebook.