CakePHP Sandbox App: Bootstrap

BreadcrumbsHelper

Bootstrap-styled breadcrumb navigation for hierarchical site structure.

Basic Breadcrumbs


			$this->Breadcrumbs->add('Home', '/');

			$this->Breadcrumbs->add('Library', '/library');

			$this->Breadcrumbs->add('Data');

			echo $this->Breadcrumbs->render();

With Array URLs

Use CakePHP routing arrays for breadcrumb links.


			$this->Breadcrumbs->add('Home', [

			  'controller' => 'Overview',

			  'action' => 'index',

			]);

			$this->Breadcrumbs->add('Bootstrap Examples', [

			  'controller' => 'Bootstrap',

			  'action' => 'index'

			]);

Prepending Items

Add items to the beginning of the breadcrumb trail.


			$this->Breadcrumbs->add('Current Page');

			$this->Breadcrumbs->prepend('Home', '/');

			$this->Breadcrumbs->prepend('Dashboard', '/dashboard');

Inserting at Specific Position

Insert breadcrumb items at a specific index.


			$this->Breadcrumbs->add('Home', '/');

			$this->Breadcrumbs->add('Final Page');

			$this->Breadcrumbs->insertAt(1, 'Middle Section', '/middle');

With Icons

Combine breadcrumbs with Bootstrap Icons.


			$this->Breadcrumbs->add(

			  $this->Icon->render('house-fill') . ' Home',

			  '/',

			  ['escape' => false]

			);

E-commerce Example

Typical product browsing breadcrumb trail.

Typical e-commerce breadcrumb showing category hierarchy

Documentation Example

Documentation site navigation pattern.

Documentation breadcrumb showing nested topics

Breadcrumb Templates

Breadcrumbs automatically use Bootstrap 5 structure:

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item">
      <a href="/">Home</a>
    </li>
    <li class="breadcrumb-item">
      <a href="/library">Library</a>
    </li>
    <li class="breadcrumb-item active" aria-current="page">
      Data
    </li>
  </ol>
</nav>

Accessibility: Breadcrumbs automatically include proper ARIA labels and the active item has aria-current="page" for screen reader support.

Common Methods

add($title, $url, $options) - Add item to end
prepend($title, $url, $options) - Add item to beginning
insertAt($index, $title, $url, $options) - Insert at position
insertBefore($target, $title, $url, $options) - Insert before item
insertAfter($target, $title, $url, $options) - Insert after item
reset() - Clear all breadcrumbs
render($options) - Output the breadcrumb HTML