Components

Breadcrumbs

A trail of steps showing where you are. Navigation when the steps are links - and a plain trail when they are not.

Basic

A list of items, in order from the root to where you are now. The last step is the current page: it renders as text with aria-current, not as a link back to itself.

razor

<VetoBreadcrumbs Items="Trail" />

@code {
    private static readonly VetoBreadcrumbItem[] Trail =
    [
        new("Home", "/", VetoIcons.Home),
        new("Docs", "/docs"),
        new("Components", "/docs/components/button"),
        new("Breadcrumbs")          // no Href: this is where you are
    ];
}

Written as children

The same trail as nested children instead of a list, for when a step needs markup of its own rather than a plain label. The children draw nothing themselves - the trail lays them out, so the separators and the current step stay consistent either way.

razor

<VetoBreadcrumbs>
    <VetoBreadcrumb Href="/" Icon="@VetoIcons.Home">Home</VetoBreadcrumb>
    <VetoBreadcrumb Href="/docs">Docs</VetoBreadcrumb>
    <VetoBreadcrumb>Breadcrumbs <span class="badge">new</span></VetoBreadcrumb>
</VetoBreadcrumbs>

Separators

Any character, any icon, or arbitrary markup. A chevron is the usual choice when the trail sits under a page title.

razor

<VetoBreadcrumbs Items="Trail" SeparatorIcon="@VetoIcons.ChevronRight" />
<VetoBreadcrumbs Items="Trail" Separator="›" />
<VetoBreadcrumbs Items="Trail" Separator="•" />

Trails that are not navigation

A step is only a link when it carries an Href, so the same component draws a file path or the steps of a wizard. Rename the trail with AriaLabel when it is not navigation, so it is not announced as navigation it is not.

razor

@* No Href on a step, so nothing here is a link. *@
<VetoBreadcrumbs Items="Path" AriaLabel="File path" />

@code {
    private static readonly VetoBreadcrumbItem[] Path =
    [
        new("Veto", Icon: VetoIcons.Folder),
        new("Components"),
        new("Navigation"),
        new("VetoBreadcrumbs.razor", Icon: VetoIcons.Document)
    ];
}

Long trails collapse

Set MaxItems and the middle of a long trail becomes a button rather than wrapping onto a second line. ItemsBeforeCollapse and ItemsAfterCollapse decide how much stays visible; clicking the button restores the rest.

razor

<VetoBreadcrumbs Items="DeepTrail"
                 MaxItems="4"
                 ItemsBeforeCollapse="1"
                 ItemsAfterCollapse="2"
                 SeparatorIcon="@VetoIcons.ChevronRight" />

Sizes

Three sizes, matching the rest of the library.

razor

<VetoBreadcrumbs Items="Trail" Size="VetoSize.Small" />
<VetoBreadcrumbs Items="Trail" Size="VetoSize.Large" />

Reacting to a step

OnItemClick fires with the step that was activated - useful when the trail drives state rather than the router.

razor

<VetoBreadcrumbs Items="Steps" OnItemClick="OnStepClicked" LinkCurrent="true" />

@code {
    private void OnStepClicked(VetoBreadcrumbItem item)
        => _clicked = $"Clicked: {item.Label}";
}

Parameters

Parameter	Type	Default	Description
`Items`	`IReadOnlyList<VetoBreadcrumbItem>?`	`null`	The steps, root first. Each is a Label plus an optional Href, Icon and Disabled.
`ChildContent`	`RenderFragment?`	`null`	VetoBreadcrumb children, for steps that need markup of their own.
`Separator`	`string`	`"/"`	What is drawn between two steps.
`SeparatorIcon`	`string?`	`null`	SVG markup between two steps. Beats Separator.
`SeparatorContent`	`RenderFragment?`	`null`	Arbitrary markup between two steps. Beats both.
`MaxItems`	`int`	`0`	Collapse the middle above this many steps. Zero never collapses.
`ItemsBeforeCollapse / ItemsAfterCollapse`	`int`	`1 / 1`	How much of a collapsed trail stays visible at each end.
`CollapsedSeparator`	`string`	`"…"`	What the expand button shows in place of the hidden steps.
`ExpandLabel`	`string`	`"Show the rest of the trail"`	Accessible name for the expand button.
`AriaLabel`	`string`	`"Breadcrumb"`	The trail's accessible name. Rename it when the trail is not navigation.
`LinkCurrent`	`bool`	`false`	Render the last step as a link too.
`Size`	`VetoSize`	`Medium`	ExtraSmall, Small, Medium, Large or ExtraLarge.
`OnItemClick`	`EventCallback<VetoBreadcrumbItem>`	`—`	Raised when a step is activated.