Getting Started

This tutorial will walk you through the creation of a RadBreadcrumb.

Define a Breadcrumb control

In order to use RadBreadcrumb in your projects you have to add references to the following assemblies:
* Telerik.Windows.Controls
* Telerik.Windows.Controls.Navigation
* Telerik.Windows.Data
You can find more info here.

A basic RadBreadcrumb definition looks like this:

XAML

<telerik:RadBreadcrumb x:Name="breadcrumb" Header="Breadcrumb Header" HorizontalAlignment="Stretch" VerticalAlignment="Top"/>

C#

RadBreadcrumb breadcrumb = new RadBreadcrumb();
breadcrumb.Header = "Breadcrumb Header";
breadcrumb.HorizontalAlignment = System.Windows.HorizontalAlignment.Stretch;
breadcrumb.VerticalAlignment = System.Windows.VerticalAlignment.Top;

VB.NET

Dim breadcrumb As New RadBreadcrumb()
breadcrumb.Header = "Breadcrumb Header"
breadcrumb.HorizontalAlignment = System.Windows.HorizontalAlignment.Stretch
breadcrumb.VerticalAlignment = System.Windows.VerticalAlignment.Top

The RadBreacrumb control is a HeaderedItemsControl and its Header is used as a root element. Therefore the control always has one root element. If you don't set the Breadcrumb.Header property an empty root element will be created.

So far there is an empty RadBreadcrumb containing no items.

Add and remove items (RadBreadcrumbItem controls) and set their Header and DropDownHeader properties

You can add items to the RadBreadcrumb control by defining RadBreadcrumbItem controls inside the RadBreadcrumb definition in XAML:

XAML

<telerik:RadBreadcrumb x:Name="breadcrumb" Header="Breadcrumb Header" HorizontalAlignment="Stretch" VerticalAlignment="Top">
    <telerik:RadBreadcrumbItem Header="BreadcrumbItem 1" DropDownHeader="DropDownItem 1">
        <telerik:RadBreadcrumbItem Header="BreadcrumbItem 1.1" DropDownHeader="DropDownItem 1.1"/>
        <telerik:RadBreadcrumbItem Header="BreadcrumbItem 1.2" DropDownHeader="DropDownItem 1.2" />
        <telerik:RadBreadcrumbItem Header="BreadcrumbItem 1.3" DropDownHeader="DropDownItem 1.3" />
    </telerik:RadBreadcrumbItem>
    <telerik:RadBreadcrumbItem Header="BreadcrumbItem 2" DropDownHeader="DropDownItem 2">
        <telerik:RadBreadcrumbItem Header="BreadcrumbItem 2.1" DropDownHeader="DropDownItem 2.1" />
        <telerik:RadBreadcrumbItem Header="BreadcrumbItem 2.2" DropDownHeader="DropDownItem 2.2" />
        <telerik:RadBreadcrumbItem Header="BreadcrumbItem 2.3" DropDownHeader="DropDownItem 2.3" />
    </telerik:RadBreadcrumbItem>
    <telerik:RadBreadcrumbItem Header="BreadcrumbItem 3" DropDownHeader="DropDownItem 3" />
</telerik:RadBreadcrumb>

Or you can populate the RadBreadcrumb.Items collection in code-behind:

C#

RadBreadcrumbItem item1 = new RadBreadcrumbItem() { Header = "BreadcrumbItem 1", DropDownHeader = "DropDownItem 1" };
item1.Items.Add(new RadBreadcrumbItem() { Header = "BreadcrumbItem 1.1", DropDownHeader = "DropDownItem 1.1" });
item1.Items.Add(new RadBreadcrumbItem() { Header = "BreadcrumbItem 1.2", DropDownHeader = "DropDownItem 1.2" });
item1.Items.Add(new RadBreadcrumbItem() { Header = "BreadcrumbItem 1.3", DropDownHeader = "DropDownItem 1.3" });
breadcrumb.Items.Add(item1);
RadBreadcrumbItem item2 = new RadBreadcrumbItem() { Header = "BreadcrumbItem 2", DropDownHeader = "DropDownItem 2" };
item2.Items.Add(new RadBreadcrumbItem() { Header = "BreadcrumbItem 2.1", DropDownHeader = "DropDownItem 2.1" });
item2.Items.Add(new RadBreadcrumbItem() { Header = "BreadcrumbItem 2.2", DropDownHeader = "DropDownItem 2.2" });
item2.Items.Add(new RadBreadcrumbItem() { Header = "BreadcrumbItem 2.3", DropDownHeader = "DropDownItem 2.3" });
breadcrumb.Items.Add(item2);
RadBreadcrumbItem item3 = new RadBreadcrumbItem() { Header = "BreadcrumbItem 3", DropDownHeader = "DropDownItem 3" };
breadcrumb.Items.Add(item3);

VB.NET

Dim item1 As New RadBreadcrumbItem() With { 
        Key .Header = "BreadcrumbItem 1", 
        Key .DropDownHeader = "DropDownItem 1" 
}
item1.Items.Add(New RadBreadcrumbItem() With { 
        Key .Header = "BreadcrumbItem 1.1", 
        Key .DropDownHeader = "DropDownItem 1.1" 
})
item1.Items.Add(New RadBreadcrumbItem() With { 
        Key .Header = "BreadcrumbItem 1.2", 
        Key .DropDownHeader = "DropDownItem 1.2" 
})
item1.Items.Add(New RadBreadcrumbItem() With { 
        Key .Header = "BreadcrumbItem 1.3", 
        Key .DropDownHeader = "DropDownItem 1.3" 
})
breadcrumb.Items.Add(item1)

Dim item2 As New RadBreadcrumbItem() With { 
        Key .Header = "BreadcrumbItem 2", 
        Key .DropDownHeader = "DropDownItem 2" 
}
item2.Items.Add(New RadBreadcrumbItem() With { 
        Key .Header = "BreadcrumbItem 2.1", 
        Key .DropDownHeader = "DropDownItem 2.1" 
})
item2.Items.Add(New RadBreadcrumbItem() With { 
        Key .Header = "BreadcrumbItem 2.2", 
        Key .DropDownHeader = "DropDownItem 2.2" 
})
item2.Items.Add(New RadBreadcrumbItem() With { 
        Key .Header = "BreadcrumbItem 2.3", 
        Key .DropDownHeader = "DropDownItem 2.3" 
})
breadcrumb.Items.Add(item2)

Dim item3 As New RadBreadcrumbItem() With { 
        Key .Header = "BreadcrumbItem 3", 
        Key .DropDownHeader = "DropDownItem 3" 
}
breadcrumb.Items.Add(item3)

In order to remove items from the RadBreadcrumb control, you can remove them from the control's Items collection:

C#

breadcrumb.Items.Remove(item2);

VB.NET

breadcrumb.Items.Remove(item2)

Enable LinearMode

By default the RadBreadcrumb control has two modes - normal and text mode. In the normal mode you can navigate through the Breadcrumb.Items using the BreadcrumbItems and their dropdown content, while in the text mode you can enter the path that you want to navigate to. The control also provides a Linear mode in which the BreadcrumbItem DropDown Items collection is hidden. In Linear mode you can navigate through the Items collection of the control by taking advantage of the text mode of the RadBreadcrumb, using its history, using the key navigation or setting the destination path from code-behind.

In order to enable the Linear mode of the RadBreadcrumb control, you have to set the IsLinearMode property to True :

XAML

<telerik:RadBreadcrumb x:Name="breadcrumb" 
                       Header="Breadcrumb Header"
                       HorizontalAlignment="Stretch"
                       VerticalAlignment="Top"
                       IsLinearMode="True">
    <telerik:RadBreadcrumbItem Header="BreadcrumbItem 1" DropDownHeader="DropDownItem 1">
        <telerik:RadBreadcrumbItem Header="BreadcrumbItem 1.1" DropDownHeader="DropDownItem 1.1" />
        <telerik:RadBreadcrumbItem Header="BreadcrumbItem 1.2" DropDownHeader="DropDownItem 1.2" />
        <telerik:RadBreadcrumbItem Header="BreadcrumbItem 1.3" DropDownHeader="DropDownItem 1.3" />
    </telerik:RadBreadcrumbItem>
    <telerik:RadBreadcrumbItem Header="BreadcrumbItem 2" DropDownHeader="DropDownItem 2">
        <telerik:RadBreadcrumbItem Header="BreadcrumbItem 2.1" DropDownHeader="DropDownItem 2.1" />
        <telerik:RadBreadcrumbItem Header="BreadcrumbItem 2.2" DropDownHeader="DropDownItem 2.2" />
        <telerik:RadBreadcrumbItem Header="BreadcrumbItem 2.3" DropDownHeader="DropDownItem 2.3" />
    </telerik:RadBreadcrumbItem>
    <telerik:RadBreadcrumbItem Header="BreadcrumbItem 3" DropDownHeader="DropDownItem 3" />
</telerik:RadBreadcrumb>

C#

breadcrumb.IsLinearMode = true;

VB.NET

breadcrumb.IsLinearMode = True

Change the number of paths saved in the Breadcrumb history

By default the RadBreadcrumb control keeps a history of 10 visited paths. If you want to increase or decrease this number, you can set the HistorySize property:

XAML

<telerik:RadBreadcrumb x:Name="breadcrumb" 
                       Header="Breadcrumb Header" 
                       HorizontalAlignment="Stretch"
                       VerticalAlignment="Top" 
                       HistorySize="15">
    ...
</telerik:RadBreadcrumb>

C#

breadcrumb.HistorySize = 15;

VB.NET

breadcrumb.HistorySize = 15

Apply a theme

XAML

<telerik:RadBreadcrumb x:Name="breadcrumb" 
                        VerticalAlignment="Top"
                        Header="Breadcrumb Header"
                        telerik:StyleManager.Theme="Vista">
     <telerik:RadBreadcrumbItem DropDownHeader="DropDownItem 1" Header="BreadcrumbItem 1">
        <telerik:RadBreadcrumbItem DropDownHeader="DropDownItem 1.1" Header="BreadcrumbItem 1.1" />
        <telerik:RadBreadcrumbItem DropDownHeader="DropDownItem 1.2" Header="BreadcrumbItem 1.2" />
        <telerik:RadBreadcrumbItem DropDownHeader="DropDownItem 1.3" Header="BreadcrumbItem 1.3" />
     </telerik:RadBreadcrumbItem>
     <telerik:RadBreadcrumbItem DropDownHeader="DropDownItem 2" Header="BreadcrumbItem 2">
        <telerik:RadBreadcrumbItem DropDownHeader="DropDownItem 2.1" Header="BreadcrumbItem 2.1" />
        <telerik:RadBreadcrumbItem DropDownHeader="DropDownItem 2.2" Header="BreadcrumbItem 2.2" />
        <telerik:RadBreadcrumbItem DropDownHeader="DropDownItem 2.3" Header="BreadcrumbItem 2.3" />
     </telerik:RadBreadcrumbItem>
     <telerik:RadBreadcrumbItem DropDownHeader="DropDownItem 3" Header="BreadcrumbItem 3" />
</telerik:RadBreadcrumb>

See Also