Breadcrumb Control

• Dec 10, 2023

The Breadcrumb control emulates a navigation bar, similar to the one displayed in Microsoft Explorer starting with Windows 7.

Xaml

<Window ...
        xmlns:dxco="http://schemas.devexpress.com/winfx/2008/xaml/controls">
    <Grid>
        <dxco:BreadcrumbControl 
            ItemsSource="{Binding Documents}" 
            KeyMember="Id"
            ParentMember="ParentId" 
            DisplayMember="Title" />
    </Grid>
</Window>

Edit Modes

The Breadcrumb control can operate in two edit modes:

• Path mode. In this mode, end-users type a path in the edit box. The Breadcrumb control displays a drop-down list of suggestions as the user types.

  

• Items mode. In this mode, end-users select a path by selecting the nodes from the drop-down lists.

  

The Breadcrumb control switches dynamically between these modes at runtime depending on end-user actions (see the animation below).

Use the EditMode property to explicitly set in which mode the control should operate at the moment.

GitHub Example

View Example: How to create a Breadcrumb Control