BreadcrumbBarDemo

Instruction file imported from JDKoll1982/MTM_Waitlist (.github/instructions/demos/Navigation/BreadcrumbBarDemo.instructions.md). Copyright stays with the author.

BreadcrumbBar

What it teaches

A path of links showing where the user is in a hierarchy, with automatic overflow into an ellipsis.

How the demo is built

The page is a UserControl at Navigation/BreadcrumbBarDemo.xaml, paired with BreadcrumbBarDemo.xaml.cs. The shell hosts it inside Shell/DemoPage.xaml, which also shows both files verbatim — the snippet viewer reads the same source the app compiles, so what is displayed is always what runs.

Layout. Root UserControl with 12 element(s).

Named elements the code-behind touches: Bar, StatusText, PathText.

Wired in XAML: OnItemClicked(), OnResetClicked(), OnDrillClicked().

Code-behind. Handlers OnItemClicked(), OnResetClicked(), OnDrillClicked(). 102 line(s), including the comments that record what the control does that the docs do not say.

Anything the demo cannot show is explained on the page rather than faked: the same rules the rest of the repo follows are in .github/instructions/winui3-api-rules.instructions.md.

MTM use case

MTM_Waitlist › Settings › sections and modules

The settings area is a set of sections with a scope — universal, role, personal — and the user moves between them constantly. Navigation state has to survive that, and the current section has to be obvious from across the shop floor.

Settings › Dunnage › Label template — three levels deep, and the clerk needs to jump back two levels without losing the edits in flight.

Schema this mirrors: config_settings_values, settings_universal, settings_personal. Sample data for the page comes from src/WinUI3LearningLab.Core/LabData.cs — part numbers, bins, dunnage types and work orders, never Item 1 or John Doe.

Gotchas

• ItemsSource holds your data; ItemTemplate turns each item into content, and the default renders ToString().
• Handle ItemClicked to navigate — the control raises an index, and does not remove the trailing items for you.
• Overflow collapses middle items into a flyout; the first and last item are always shown.

Try this

• Run WinUI3LearningLab.App.exe --demo breadcrumb-bar. The page shows BreadcrumbBarDemo.xaml and BreadcrumbBarDemo.xaml.cs beside the live demo, so the next edit can be made against something already running.
• Change one value in the XAML and rebuild; the snippet viewer re-reads the file, so what is shown stays the code that compiled.

Documentation

• Microsoft.UI.Xaml.Controls.BreadcrumbBar
• WinUI 3 API rules for this repo
• Design system

Generated from DemoCatalog by --export-instructions. Do not edit by hand: change the descriptor in src/WinUI3LearningLab.Core/Catalog/Navigation.cs or the demo source, then regenerate.