Breadcrumb JSP Tag Overview

The Breadcrumb JSP tag is a server-side wrapper for the Kendo UI Breadcrumb widget.

Telerik UI for JSP DevCraft image

The Breadcrumb is part of Telerik UI for JSP, a professional grade UI library with 90+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

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 JSP:

Step 1 Make sure you followed all the steps in the introductory article on Telerik UI for JSP.

Step 2 Create a new action method to render the view:

    @RequestMapping(value = {"index"}, method = RequestMethod.GET)
    public String index() {

        return "web/Breadcrumb/index";
    }

Step 3 Add the Kendo UI taglib mapping to the page:

    <%@taglib prefix="kendo" uri="https://www.telerik.com/kendo-ui/jsp/tags"%>

Step 4 Add the breadcrumb tag and configure the component:

    <kendo:breadcrumb name="breadcrumb">
        <kendo:breadcrumb-items>
            <kendo:breadcrumb-item type="rootitem" href="https://demos.telerik.com/jsp-ui/" text="All Components" showText="true" icon="home" showIcon="true"></kendo:breadcrumb-item>
            <kendo:breadcrumb-item type="item" href="/breadcrumb" text="Breadcrumb" showText="true"></kendo:breadcrumb-item>
            <kendo:breadcrumb-item type="item" href="/index" text="Basic Usage" showText="true"></kendo:breadcrumb-item>
        </kendo:breadcrumb-items>
    </kendo:breadcrumb>

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.

   <kendo:breadcrumb name="breadcrumb" bindToLocation="true" navigational="true"></kendo:breadcrumb>

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.

    <kendo:breadcrumb name="breadcrumb" delimiterIcon="line">
        <kendo:breadcrumb-items>
            <kendo:breadcrumb-item type="rootitem" href="https://demos.telerik.com/jsp-ui/" text="All Components" showText="true" icon="globe"></kendo:breadcrumb-item>
            <kendo:breadcrumb-item type="item" href="/breadcrumb" text="Breadcrumb" showText="true" icon="gear" showIcon="true"></kendo:breadcrumb-item>
            <kendo:breadcrumb-item type="item" href="/icons" text="Icons" showText="true" icon= "cloud" showIcon="true"></kendo:breadcrumb-item>
        </kendo:breadcrumb-items>
    </kendo:breadcrumb>

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.

    <kendo:breadcrumb name="breadcrumb" editable="true">
        <kendo:breadcrumb-items>
            <kendo:breadcrumb-item type= "rootitem" href= "https://demos.telerik.com/jsp-ui/" text= "All Components" showText="true" icon="home"></kendo:breadcrumb-item>
            <kendo:breadcrumb-item type="item" href="/breadcrumb" text="Breadcrumb" showText="true"></kendo:breadcrumb-item>
            <kendo:breadcrumb-item type="item" href= "/editing" text= "Editing" showText="true" icon= "edit" showIcon="true"></kendo:breadcrumb-item>
        </kendo:breadcrumb-items>
    </kendo:breadcrumb>

Event Handling

Subscribe to Events

You can subscribe to the events exposed by Kendo UI Breadcrumb by the handler name.

<kendo:breadcrumb name="breadcrumb" editable="true" click="onClick" change="onChange">
        <kendo:breadcrumb-items>
            <kendo:breadcrumb-item type= "rootitem" href= "https://demos.telerik.com/jsp-ui/" text= "All Components" showText="true" icon="home"></kendo:breadcrumb-item>
            <kendo:breadcrumb-item type="item" href="/breadcrumb" text="Breadcrumb" showText="true"></kendo:breadcrumb-item>
            <kendo:breadcrumb-item type="item" href= "/events" text= "Events" showText="true"></kendo:breadcrumb-item>
        </kendo:breadcrumb-items>
    </kendo:breadcrumb>
<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

Existing Instances

You are able to reference an existing Breadcrumb instance via the jQuery.data(). Once a reference is established, you are able to use the Breadcrumb API to control its behavior.

<kendo:breadcrumb name="breadcrumb">
        <kendo:breadcrumb-items>
            <kendo:breadcrumb-item type="rootitem" href="https://demos.telerik.com/jsp-ui/" text="All Components" showText="true" icon="home" showIcon="true"></kendo:breadcrumb-item>
            <kendo:breadcrumb-item type="item" href="/breadcrumb" text="Breadcrumb" showText="true"></kendo:breadcrumb-item>
            <kendo:breadcrumb-item type="item" href="/index" text="Basic Usage" showText="true"></kendo:breadcrumb-item>
        </kendo:breadcrumb-items>
    </kendo:breadcrumb>

// Put this after your Kendo Breadcrumb tag declaration
<script>
$(function() {
    // Notice that the Name() of the Breadcrumb is used to get its client-side instance
    var breadcrumb = $("#breadcrumb").data("kendoBreadcrumb");
});
</script>

See Also

In this article
Not finding the help you need? Improve this article