Breadcrumb

A Breadcrumb shows a navigation path such as "Assets › Textures › Stone".

<UIToolbox.Breadcrumb items="Assets,Textures,Terrain,Stone" max-visible="3" />

var path = root.Q<Breadcrumb>();
path.Navigated += index => OpenFolder(path.Items.Take(index + 1));

// The folders next to "Textures", in a menu on the segment
path.SetChoices(1, new[] { "Textures", "Models", "Audio" });
path.ChoicePicked += (index, choice) => OpenFolder(path.Items);

Member	Description
`Items` (`items`)	The segments, from the root to the current one.
`Separator` (`separator`)	The text between two segments (›).
`SeparatorClass` (`separator-class`)	A USS class for each separator, for your own look.
`MaxVisible` (`max-visible`)	The most segments to show. 0 shows all. The smallest limit is 2.
`Push(item, icon)`	Adds a segment at the end, with an optional icon. It becomes the current one.
`SetIcon(index, icon)`, `GetIcon(index)`	The icon of a segment (a `Background`). `default` is no icon.
`SetChoices(index, choices)`	Gives a segment a "▾" button with a menu of the choices for its place in the path. Null or an empty list removes the button.
`NavigateTo(index)`	Removes the segments after `index` and raises `Navigated`.
`Navigated`	`Action<int>`, raised with the index of the segment the user went back to.
`ChoicePicked`	`Action<int, string>`, raised with the index of a segment and its new text, after the user picked another choice for it.

Every segment is a button, so it can show an icon. A click on a segment other than the last calls NavigateTo. The current segment does nothing and takes no focus.
Icons stay with their segments when the user navigates. Setting Items removes all icons and choices.
When there are more segments than MaxVisible, the path shows the first segment, "…" and the last segments. The "…" is a button: it opens a menu of the hidden segments, and an item navigates to its segment. Its tooltip lists the hidden segments.
A segment with choices has a "▾" button after it. The menu shows the choices with a dot on the one that is the segment. A pick sets the text of the segment, removes the segments after it and raises ChoicePicked. It does not raise Navigated. A pick of the same choice does nothing.
The current segment can have choices too.
A second click on "…" or "▾" closes the menu. Escape and a click outside close it too.
With the keyboard, Tab goes to "…" or "▾" and Enter opens the menu. Up and Down move in the menu and Enter picks.
Set Items again after you change the list in place.

Tips:

Put the current segment in its own choices, so the user sees where the path is.
For an image as the separator, set separator="" and a separator-class with a size and a background-image.

Styling

Class	Element
`tb-breadcrumb`	The row.
`tb-breadcrumb__segment`	A segment (a button). Its icon is the `Image` child; the sheet makes it 14 px.
`tb-breadcrumb__segment--current`	The last segment. It has no hover or press look.
`tb-breadcrumb__separator`	The text between segments. `SeparatorClass` adds your class next to it.
`tb-breadcrumb__ellipsis`	The "…" button for hidden segments.
`tb-breadcrumb__choices`	The "▾" button of a segment with choices.

A chevron image as the separator:

.my-chevron {
    width: 12px;
    height: 12px;
    background-image: url("project://database/Assets/UI/chevron.png");
}

#Breadcrumb

#Styling

Styling