BreadcrumbBar Class

Definition

Namespace:

Microsoft.UI.Xaml.Controls

The BreadcrumbBar control provides the direct path of pages or folders to the current location.

This documentation applies to WinUI 2 for UWP (for WinUI in the Windows App SDK, see the Windows App SDK namespaces).

/// [Microsoft.UI.Xaml.CustomAttributes.MUXPropertyChangedCallback(enable=true)]
/// [Microsoft.UI.Xaml.CustomAttributes.MUXPropertyChangedCallbackMethodName(value="OnPropertyChanged")]
/// [Windows.Foundation.Metadata.ContractVersion(Microsoft.UI.Xaml.XamlContract, 65536)]
/// [Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
/// [Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
class BreadcrumbBar : Control

[Microsoft.UI.Xaml.CustomAttributes.MUXPropertyChangedCallback(enable=true)]
[Microsoft.UI.Xaml.CustomAttributes.MUXPropertyChangedCallbackMethodName(value="OnPropertyChanged")]
[Windows.Foundation.Metadata.ContractVersion(typeof(Microsoft.UI.Xaml.XamlContract), 65536)]
[Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
[Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
public class BreadcrumbBar : Control

Public Class BreadcrumbBar
Inherits Control

Inheritance

Control

BreadcrumbBar

Attributes

Microsoft.UI.Xaml.CustomAttributes.MUXPropertyChangedCallbackAttribute Microsoft.UI.Xaml.CustomAttributes.MUXPropertyChangedCallbackMethodNameAttribute ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute

Examples

Tip

For more info, design guidance, and code examples, see Breadcrumb bar.

Open the WinUI 2 Gallery app and see the BreadcrumbBar in action.

The WinUI 2 Gallery app includes interactive examples of most WinUI 2 controls, features, and functionality. Get the app from the Microsoft Store or get the source code on GitHub.

Remarks

Tip

For more info, design guidance, and code examples, see Breadcrumb bar overview.

A BreadcrumbBar provides the direct path of pages or folders to the current location. It is often used for situations where the user's navigation trail (in a file system or menu system) needs to be persistently visible and the user may need to go back to a previous location.

If the app is resized so that there is not enough space to show all the nodes, the breadcrumbs collapse and an ellipsis replaces the leftmost nodes. Clicking the ellipsis opens a flyout to show the collapsed nodes.

Control style and template

You can modify the default Style and ControlTemplate to give the control a unique appearance. For information about modifying a control's style and template, see Styling controls. The default style, template, and resources that define the look of the control are included in the generic.xaml file. For design purposes, generic.xaml is available in the (Program Files)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\ <SDK version>\Generic folder from a Windows Software Development Kit (SDK) installation. Styles and resources from different versions of the SDK might have different values.

Starting in Windows 10, version 1607 (SDK 14393), generic.xaml includes resources that you can use to modify the colors of a control in different visual states without modifying the control template. In apps that target this software development kit (SDK) or later, modifying these resources is preferred to setting properties such as Background and Foreground. For more info, see the Light-weight styling section of the Styling controls article.

This table shows the resources used by the BreadcrumbBar control.

Resource key	Description
BreadcrumbBackgroundBrush	Sets the background color
BreadcrumbBorderBrush	Sets the border color
BreadcrumbItemThemeFontSize	Sets the item font size

Resource key	Description
BreadcrumbBarChevronLeftToRight	Chevron for left to right mode
BreadcrumbBarChevronRightToLeft	Chevron for right to left mode
BreadcrumbBarChevronPadding	Chevron padding thickness
BreadcrumbBarItemFontWeight	Item font weight
BreadcrumbBarNormalForegroundBrush	Foreground color at rest
BreadcrumbBarHoverForegroundBrush	Foreground color on hover
BreadcrumbBarPressedForegroundBrush	Foreground color when pressed
BreadcrumbBarDisabledForegroundBrush	Foreground color when disabled
BreadcrumbBarFocusForegroundBrush	Foreground color on focus
BreadcrumbBarCurrentNormalForegroundBrush	Current item foreground color at rest
BreadcrumbBarCurrentHoverForegroundBrush	Current item foreground color on hover
BreadcrumbBarCurrentPressedForegroundBrush	Current item foreground color when pressed
BreadcrumbBarCurrentDisabledForegroundBrush	Current item foreground color when disabled
BreadcrumbBarCurrentFocusForegroundBrush	Current item foreground color on focus
BreadcrumbBarEllipsisDropDownItemBackground	Ellipsis dropdown item background color at rest
BreadcrumbBarEllipsisDropDownItemBackgroundPointerOver	Ellipsis dropdown item background color on pointer over
BreadcrumbBarEllipsisDropDownItemBackgroundPressed	Ellipsis dropdown item background color when pressed
BreadcrumbBarEllipsisDropDownItemBackgroundDisabled	Ellipsis dropdown item background color when disabled
BreadcrumbBarEllipsisDropDownItemForegroundPointerOver	Ellipsis dropdown item foreground color on pointer over
BreadcrumbBarEllipsisDropDownItemForegroundPressed	Ellipsis dropdown item foreground color when pressed
BreadcrumbBarEllipsisDropDownItemForegroundDisabled	Ellipsis dropdown item foreground color when disabled
BreadcrumbBarForegroundBrush	Foreground color at rest
BreadcrumbBarBackgroundBrush	Background color
BreadcrumbBarBorderBrush	Border color at rest
BreadcrumbBarEllipsisFlyoutPresenterBackground	Ellipsis flyout presenter background color
BreadcrumbBarEllipsisFlyoutPresenterBorderBrush	Ellipsis flyout presenter border color
BreadcrumbBarEllipsisFlyoutPresenterBorderThemeThickness	Ellipsis flyout presenter border thickness
BreadcrumbBarItemThemeFontSize	Item font size
BreadcrumbBarChevronFontSize	Chevron font size

Constructors

BreadcrumbBar()

Initializes a new instance of the BreadcrumbBar class. This documentation applies to WinUI 2 for UWP (for WinUI in the Windows App SDK, see the Windows App SDK namespaces).

Properties

ItemsSource	Gets or sets an object source used to generate the content of the BreadcrumbBar. This documentation applies to WinUI 2 for UWP (for WinUI in the Windows App SDK, see the Windows App SDK namespaces).
ItemsSourceProperty	Identifies the ItemsSource dependency property. This documentation applies to WinUI 2 for UWP (for WinUI in the Windows App SDK, see the Windows App SDK namespaces).
ItemTemplate	Gets or sets the data template for the BreadcrumbBarItem. This documentation applies to WinUI 2 for UWP (for WinUI in the Windows App SDK, see the Windows App SDK namespaces).
ItemTemplateProperty	Identifies the ItemTemplate dependency property. This documentation applies to WinUI 2 for UWP (for WinUI in the Windows App SDK, see the Windows App SDK namespaces).

Events

ItemClicked

Occurs when an item is clicked in the BreadcrumbBar. This documentation applies to WinUI 2 for UWP (for WinUI in the Windows App SDK, see the Windows App SDK namespaces).

See also

• Breadcrumb bar overview