WebForms Breadcrumb Overview

RadBreadcrumb is an intuitive UI component that allows navigation within a folder structure or web page. It provides an easy way to navigate backwards by one or multiple steps.

RadBreadcrumb is available as of R1 2021 and it is a server-side WebForms wrapper over the Kendo UI Breadcrumb for jQuery widget.

Telerik UI for ASP.NET AJAX Ninja image

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

Figure 1:

WebForms Breadcrumb overview

Key Features

Add a RadBreadcrumb Control

To add a RadBreadcrumb similar to the one shown in Figure 1 follow the steps:

  1. Add a ScriptManager control on a Web Form.

  2. Use the <telerik:RadBreadcrumb> tag to declare the Breadcrumb.

  3. Use the <Items> inner tag to declare each BreadcrumbItem and set its properties.

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<telerik:RadBreadcrumb runat="server" ID="RadBreadcrumb1" Skin="Default">
    <Items>
        <telerik:BreadcrumbItem Type="RootItem" ShowText="true" Text="Telerik UI for ASP.NET AJAX"  />
        <telerik:BreadcrumbItem Text="Controls" ShowIcon="true" Icon="folder-open" />
        <telerik:BreadcrumbItem Text="RadBreadcrumb" ShowIcon="true" Icon="folder-open" />
        <telerik:BreadcrumbItem Text="Overview" Icon="star" ShowIcon="true" />
    </Items>
</telerik:RadBreadcrumb>

Skins

The RadBreadcrumb control can be styled by setting a desired built-in skin:

Figure 2:

WebForms Breadcrumb skins

Find more information about using skins in the Controlling Visual Appearance section.

Go ahead with the Getting Started article to learn more about Breadcrumb Control. Also, you can check out the RadBreadCrumb online demos to see it in action.

See Also

In this article