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.

Figure 1:

Key Features

• Built-in accessibility, WAI-ARIA and RTL support
• Support for root and child items
• Built-in Icons
• Overflowing
• Editing functionality
• Built-in navigation support
• Support for ClientItemTemplate
• Flexible client-side API
• Visual Appeal - shipped with a rich set of skins for easy and consistent styling

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.NET

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

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

• Getting Started

• RadBreadrumb online demos

• First Steps with UI for ASP.NET AJAX

• ASP.NET AJAX Breadcrumb