SusBreadcrumbs

Hierarchy trail — clickable ancestors, current leaf as plain text.

Package

SusKit · Atoms (commercial)

Open in Playground

SusKit · Atoms

Props

Name	Type	Default
Divider	Prop<string>	"/"	v-model
Density	Prop<string>	"default"	v-model
Color	Prop<string>	"primary"	v-model
Disabled	Prop<bool>	false	v-model

Slots

No slots.

Events

Name	Field	Payload
Click	OnClick	string
ItemClick	OnItemClick	BreadcrumbItem

Style hooks

USS class contract — override appearance without touching C#. States toggle via these classes:

• sus-breadcrumbs
• sus-breadcrumbs__divider
• sus-breadcrumbs__item
• sus-breadcrumbs__item--current
• sus-breadcrumbs__item--last
• sus-breadcrumbs__item--link
• sus-breadcrumbs__row
• sus-breadcrumbs--density-comfortable
• sus-breadcrumbs--density-compact
• sus-breadcrumbs--disabled

Usage

Populate Items in code. The last item is the current page (not a link). Earlier items fire OnClick / OnItemClick.

var crumbs = new SusBreadcrumbs();
crumbs.Divider.Value = "/";
crumbs.Color.Value = "primary";
crumbs.Items.Value = new List<SusBreadcrumbs.BreadcrumbItem>
{
    new() { Title = "Home", Value = "home" },
    new() { Title = "Settings", Value = "settings" },
    new() { Title = "Audio", Value = "audio" },
};
crumbs.OnClick += value => { /* navigate by value */ };

Prop / event	Role
Items	List<BreadcrumbItem> — Title, Href, Value, Disabled
Divider	Separator string between nodes (default /)
OnClick	Action<string> — selected Value
OnItemClick	Action<BreadcrumbItem> — full item