Breadcrumb PHP Class Overview
The Kendo UI Breadcrumb for PHP is a server-side wrapper for the Kendo UI Breadcrumb widget.
Getting Started
Configuration
The Breadcrumb provides a set of default API configuration options that can be set during its initialization. Follow the steps below to configure the Kendo UI Breadcrumb for PHP:
Step 1 Make sure you followed all the steps in the introductory article on Telerik UI for PHP—include the autoloader, JavaScript, and CSS files.
Step 2 Create a Breadcrumb:
$breadcrumb = new \Kendo\UI\Breadcrumb('breadcrumb');
$rootItem = new \Kendo\UI\BreadcrumbItem();
$rootItem->type("rootItem")
->href("https://demos.telerik.com/php-ui/")
->text("All Components")
->showText(true)
->icon("home")
->showIcon(true);
$firstItem = new \Kendo\UI\BreadcrumbItem();
$firstItem->type("item")
->href("/breadcrumb")
->text("Breadcrumb")
->showText(true);
$secondItem = new \Kendo\UI\BreadcrumbItem();
$secondItem->type("item")
->href("/index")
->text("Basic Usage")
->showText(true);
$breadcrumb->addItem($rootItem);
$breadcrumb->addItem($firstItem);
$breadcrumb->addItem($secondItem);
Step 3 Output the Breadcrumb by echoing the result of the render
method:
<?= $breadcrumb->render() ?>
Navigational
The navigational
configuration determines whether automatic navigation will be enabled. The default value is false. When set to true, the url will be added to the href
attribute of the Breadcrumb items.
<?php
$breadcrumb = new \Kendo\UI\Breadcrumb('breadcrumb');
$breadcrumb
->bindToLocation(true)
->navigational(true);
echo $breadcrumb->render();
?>
The bindToLocation
configuration sets the value ot the widget to the current url ( the location object). In addition, that url will be added to the href
attribute of the Breadcrumb items through the navigational
configuration.
Icons
The Breadcrumb allows to configure the icons of the items and the delimiters.
Root Icon
The root icon is the first icon and is rendered as a home
icon. It can be changed through the items.icon
configuration. It is also clickable and it will reset the value of the component.
Item Icon
The icons rendered for each element after the root icon. It is also clickable and can be configured through the items.icon
.
Delimiter Icon
The icons that separate the items of the Breadcrumb.
The example below demonstrates how you can alter the different icons.
<?php
$breadcrumb = new \Kendo\UI\Breadcrumb('breadcrumb');
$rootItem = new \Kendo\UI\BreadcrumbItem();
$rootItem->type("rootItem")
->href("https://demos.telerik.com/php-ui/")
->text("All Components")
->showText(true)
->icon("globe")
->showIcon(true);
$firstItem = new \Kendo\UI\BreadcrumbItem();
$firstItem->type("item")
->href("/breadcrumb")
->text("Breadcrumb")
->showText(true)
->icon("gear")
->showIcon(true);
$secondItem = new \Kendo\UI\BreadcrumbItem();
$secondItem->type("item")
->href("/icons")
->text("Icons")
->icon("cloud")
->showIcon(true)
->showText(true);
$breadcrumb->addItem($rootItem);
$breadcrumb->addItem($firstItem);
$breadcrumb->addItem($secondItem);
$breadcrumb->delimiterIcon("shape-line");
echo $breadcrumb->render();
?>
Editing
You can edit the path set through the Breadcrumb widget if the editable
configuration is enabled. When you click in an empty area of the component or on the current page, the Breadcrumb will enter into editing mode. That will also happen when you enter
press if the Breadcrumb is focused.
Editing mode shows an input field containing the current value of the widget. Users are allowed to type a new path.
The below example demonstrates how to enable editing of the Breadcrumb.
<?php
$breadcrumb = new \Kendo\UI\Breadcrumb('breadcrumb');
$rootItem = new \Kendo\UI\BreadcrumbItem();
$rootItem->type("rootItem")
->href("https://demos.telerik.com/php-ui/")
->text("All Components")
->showText(true)
->icon("home")
->showIcon(true);
$firstItem = new \Kendo\UI\BreadcrumbItem();
$firstItem->type("item")
->href("/breadcrumb")
->text("Breadcrumb")
->showText(true);
$secondItem = new \Kendo\UI\BreadcrumbItem();
$secondItem->type("item")
->href("/editing")
->text("Editing")
->icon("edit")
->showIcon(true)
->showText(true);
$breadcrumb->addItem($rootItem);
$breadcrumb->addItem($firstItem);
$breadcrumb->addItem($secondItem);
$breadcrumb->editable("true");
echo $breadcrumb->render();
?>
Event Handling
You can subscribe to the events handler name.
Specify Function Names
The example below demonstrates how to subscribe for events by specifying a JavaScript function name.
<?php
$breadcrumb = new \Kendo\UI\Breadcrumb('breadcrumb');
$rootItem = new \Kendo\UI\BreadcrumbItem();
$rootItem->type("rootItem")
->href("https://demos.telerik.com/php-ui/")
->text("All Components")
->showText(true)
->icon("home")
->showIcon(true);
$firstItem = new \Kendo\UI\BreadcrumbItem();
$firstItem->type("item")
->href("/breadcrumb")
->text("Breadcrumb")
->showText(true);
$secondItem = new \Kendo\UI\BreadcrumbItem();
$secondItem->type("item")
->href("/events")
->text("Events")
->showText(true);
$breadcrumb->addItem($rootItem);
$breadcrumb->addItem($firstItem);
$breadcrumb->addItem($secondItem);
$breadcrumb->editable("true");
$breadcrumb->click("onClick");
$breadcrumb->change("onChange");
echo $breadcrumb->render();
?>
<script>
function onClick(e) {
kendoConsole.log("Clicked. :: target: " + e.item.text + ". Type :: " + e.item.type);
}
function onChange(e) {
kendoConsole.log("Changed. New Value :: " + e.value);
}
</script>
Reference
Client-Side Instances
To reference to an existing Breadcrumb instance, use the jQuery.data()
method. Once a reference is established, use the API to control its behavior.
The following example demonstrates how to access an existing BottomNavigation instance.
$breadcrumb = new \Kendo\UI\Breadcrumb('breadcrumb');
<script>
$(function() {
// The constructor parameter is used as the 'id' HTML attribute of the Breadcrumb
var breadcrumb = $("#breadcrumb").data("kendoBreadcrumb");
});
</script>