Breadcrumb Edit Control - Devexpress

Nov 07, 2023
7 minutes to read

The Breadcrumb Edit Control (represented by the BreadCrumbEdit class object in code) emulates a navigation bar, similar to the one displayed in Microsoft Explorer starting from Windows 7 (see the following figure).

This control allows you to build a node hierarchy, where each node is related to one or many child nodes. At runtime the control displays your current position within this tree.

Integration With TreeList

You can pair a BreadCrumbEdit and TreeList control to implement a breadcrumb navigation through the TreeList hierarchy. In pairing mode, the BreadCrumbEdit automatically syncs its hierarchy and selection with the TreeList. See Breadcrumb Navigation to learn more.

Concepts and Visual Elements

This section describes Breadcrumb Edit Control’s cornerstones, crucial for understanding the editor’s mechanics.

Nodes
Paths
Persistent nodes
Dynamically populated nodes
Validation

The Breadcrumb Edit Control can operate in two modes - Select and Edit. See the Breadcrumb Modes document for more details.

History

Whenever an end-user succesfully navigates to a node in Edit mode, the path to this node is written to a breadcrumb history. At runtime users can click the editor’s drop-down button to view these stored paths and select one to navigate to it. The following figure illustrates an example.

To access the breadcrumb history in code, use the RepositoryItemBreadCrumbEdit.History property. This property provides access to the BreadCrumbHistory collection, which stores the BreadCrumbHistoryItem class objects. Each history item has the BreadCrumbHistoryItem.Path property in which the item keeps the path to the related node. The Breadcrumb Edit Control provides multiple methods to navigate through history items.

BreadCrumbEdit.GoBack - navigates one BreadCrumbHistoryItem back from the current path.
BreadCrumbEdit.GoForward - navigates one BreadCrumbHistoryItem forward from the current path, discarding the previously performed back navigation.
BreadCrumbEdit.GoUp - navigates to the parent node from the currently selected node. This method relates to common BreadCrumbEdit navigation rather than navigation history.

End-users can navigate through nodes by means different from typing paths in Edit mode, for instance:

by using mouse in Select mode;
by modifying the editor’s path from code;
by using shortcuts stored within a persistent node, etc.

Though the regular breadcrumb history, accessed through the RepositoryItemBreadCrumbEdit.History property, does not store any records of such navigation, you can get a complete history by calling the BreadCrumbEdit.GetNavigationHistory method. This method returns the separate BreadCrumbHistory collection that tracks every user’s move within the editor.

Editor Buttons

By default, the Breadcrumb Edit Control has one button that invokes a drop-down menu with history records. You can remove this predefined button and/or add your own custom buttons. To do this at design-time, use the corresponding link on the editor’s smart-tag. The button editor that will appear allow you to create, re-arrange, remove buttons and modify their properties using the built-in property grid.

To do this in code, modify the RepositoryItemButtonEdit.Buttons property, accessed through the editor’s BreadCrumbEdit.Properties category. Buttons are represented by the EditorButton class objects. Follow the corresponding link in the ‘Examples’ section of this document to see an example.

Examples

This section contains links to task-based help regarding the Breadcrumb Edit Control.