CakePHP 4 Breadcrumbs Helper

Share this Article
Reading Time: 8 minutes
12 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.x Installation at System

Before installation of CakePHP we need some system requirements and it’s configuration. Here, System configuration means Server, PHP, Extensions, Database etc.

To know about basic installation settings to system, server to get this framework, you need to follow the guidelines of cakephp official document of. This document makes clear about what we need initially to set the things in a better way.

Additionally, we need composer at system. Composer is a tool which used to manage PHP dependencies, libraries etc .We will use composer to install CakePHP. So, first you need to install composer. If you have already installed or exists at your system, you can verify by command –

$ composer

If composer has been installed then this command will list all available commands of composer other wise you will get error something composer command not found.

Click here for the article – How to Install composer in ubuntu

Assuming Composer exists at system.

Let’s create a CakePHP project at 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.

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.

Leave a Comment