Microsoft-ui-xaml: Proposal: Breadcrumb control for navigation trail

[kat-y]

Proposal: Create Breadcrumb Control

A spec has been opened with a PR for discussing the Breadcrumb spec. Feel free to continue general discussion in this proposal!

Summary

A Breadcrumb control can provide a persisting 'trail' that shows the user's navigation path.

Rationale

• Breadcrumb is a common UI that allows users to see the path of where they have navigated, especially when 2+ layers deep
• Breadcrumb scenarios exist in various places, including settings and file/folder structure navigation
• Creating a Fluent Breadcrumb control would increase consistency and accessibility

Scope

| Capability | Priority |
| :---------- | :------- |
| Provide a persisting trail of the navigation path for a user when 2+ layers away from "home" | Must |
| Allow user to go back to points in their navigation path | Must |
| "Compress" the points when resized such that the full path is too long | Could |

Important Notes

Breadcrumb controls are in:

• Fluent UI for web
• Fabric JS/Fabric React
• UWP Breadcrumb repo by @goedware
• DevExpress Breadcrumb
• Telerik UI RadBreadcrumb

Open Questions

• Are there app scenarios other than settings and nested folders that would use a Breadcrumb control?
• The DevExpress and Telerik UI WPF Breadcrumbs control have flyout menus to select a different path to jump to, is this a feature apps using WinUI would want, and in what scenarios?
  
• The Fluent UI Breadcrumb's compression behavior cuts crumbs from the middle of the path. If this is implemented as a default behavior, what parameters should a developer have access to to change how the path is compressed?
  
• As it is possible to build a Breadcrumb using existing pieces from WinUI and chevron icons, would a 'style example' in XAML Controls Gallery (or somewhere else open-source) rather than a completely new control help developers to build Breadcrumbs with consistency and Fluent design? This could be built using ListView, ItemsRepeater, ComboBox or other existing controls.

[duke7553]

@kat-y We could really use a control like this in Files.

Our current solution involving the use of a ListView is poorly-suited, and users complain of awkwardly small touch targets for the expand button. I'm glad to see a proposal for standardizing this behavior!

[kat-y]

Our current solution involving the use of a ListView is poorly-suited, and users complain of awkwardly small touch targets for the expand button.

@duke7553 could you elaborate here - what is the touch target for the expand button?
Is this scenario related to this open question?

• The DevExpress and Telerik UI WPF Breadcrumbs control have flyout menus to select a different path to jump to, is this a feature apps using WinUI would want, and in what scenarios?

[mdtauk]

Any File Explorer replacement should include the context/drop down menu as a UI feature - but what populates that menu should probably be left to the developer.

I would say that going up a level, as well as handling of Forward and Backward navigation, should be made as simple as possible to the developer - so maybe including a back/forward stack that can be hooked up to buttons.

[kat-y]

I would say that going up a level, as well as handling of Forward and Backward navigation, should be made as simple as possible to the developer - so maybe including a back/forward stack that can be hooked up to buttons.

@mdtauk This sounds like separate forward/backwards buttons (often in a file navigation system) that would live next to a Breadcrumb trail - do you see this as in-scope for Breadcrumb control itself?

Just updated the proposal to have a new open question:

• As it is possible to build a Breadcrumb using existing pieces from WinUI and chevron icons, would a 'style example' in XAML Controls Gallery (or somewhere else open-source) rather than a completely new control help developers to build Breadcrumbs with consistency and Fluent design?

[mdtauk]

I would say that going up a level, as well as handling of Forward and Backward navigation, should be made as simple as possible to the developer - so maybe including a back/forward stack that can be hooked up to buttons.

@mdtauk This sounds like separate forward/backwards buttons (often in a file navigation system) that would live next to a Breadcrumb trail - do you see this as in-scope for Breadcrumb control itself?

Just updated the proposal to have a new open question:

• As it is possible to build a Breadcrumb using existing pieces from WinUI and chevron icons, would a 'style example' in XAML Controls Gallery (or somewhere else open-source) rather than a completely new control help developers to build Breadcrumbs with consistency and Fluent design?

I don't see the navigation buttons being part of the control, but the control managing/maintaining navigation stacks which a developer could wire up to buttons might be something to consider. Of course it should be for the more experienced developers to provide some response to that suggestion - they may find it too limiting relying on the control to keep track of previous navigation states/targets - and would prefer to handle that themselves.

Beyond a consistent style and behaviour pattern for the breadcrumb bar - I am not qualified to offer a definitive suggestion.

FluentUI has a discreet Breadcrumb control
https://developer.microsoft.com/en-us/fluentui#/controls/web/breadcrumb

And of course the most obvious example of the Windows UI using it is File Explorer (drop downs for folder choosing at the same level)

Google Drive has one - using a drop down on the "current/active" breadcrumb item

Both the UWP versions of files apps made by Microsoft use breadcrumb bars.

[duke7553]

@kat-y Yes. The touch target I'm referring to would be the divider button which, when invoked, displays a flyout with other locations to navigate to. Users have told us that this dropdown is hard to invoke with touch input, so when prototyping this new control the team should keep this other input method in mind.

[kat-y]

Sounds like the flyout menu behavior is something useful to Files and other folder-navigating scenarios.

they may find it too limiting relying on the control to keep track of previous navigation states/targets - and would prefer to handle that themselves.

@mdtauk I agree with you - it's not within the scope of a Breadcrumb to track these for developers.

Would love to hear any thoughts on the following direction for Breadcrumb:

• As it is possible to build a Breadcrumb using existing pieces from WinUI and icons, would a 'style example' in XAML Controls Gallery (or somewhere else open-source) rather than a completely new control help developers to build Breadcrumbs with consistency and Fluent design? This could be built using ListView, ItemsRepeater, ComboBox or other existing controls.

[mdtauk]

• As it is possible to build a Breadcrumb using existing pieces from WinUI and icons, would a 'style example' in XAML Controls Gallery (or somewhere else open-source) rather than a completely new control help developers to build Breadcrumbs with consistency and Fluent design? This could be built using ListView, ItemsRepeater, ComboBox or other existing controls.

I think almost all controls are made up of individual elements and controls - so sure you could use a series of re-styled buttons with extra buttons - but not having it as a control means it becomes very likely individual approaches will show inconsistent behaviour and visual styling. They may not take into account accessibility concerns. And this would be another disparity between WinUI and FluentUI.

[zipgenius]

A breadcrumb control must definitely be included in WinUI. In my application, ZipGenius 6, I had it because Delphi had plenty of VCL components for this specific task and one of them was a perfect clone of File Explorer's one from Windows Vista/7.
I would surely use a breadcrumb bar in ZipGenius new version, which I'm developing with WinUI, .Net, C# and so on. This kind of control is absolutely needed for applications that allow users to move between locations and file managers are not the only scenarios: just imagine how could benefit a CRM software, as example.
The breadcrumb made by Goedware is good but not enough because it doesn't have flout menus attached to the dividers; however it could be a great starting point.

[kat-y]

Happy to share that this proposal has been approved for spec writing!

You can see the spec with API and other details here! If you have comments or feedback on Breadcrumb, please continue discussion in the associated PR.

As part of discussion with the WinUI team, the work for Breadcrumb has been scoped to V1 and V2 stages of the API. In V1 Breadcrumb no chevrons are interactable to show children. V2 Breadcrumb will add functionality to have flyouts from chevrons for every node, to view children of that node. This spec focuses on V1 Breadcrumb, but keeping in mind that V1 should be positioned in a way to have V2 features smoothly added later.