Layout & navigation

AppBreadcrumbs

The path from a root to the current page — the last crumb is where the user is.

<app-breadcrumbs><app-breadcrumb label="Projects" href="/projects" /><app-breadcrumb label="Acme Corp" /></app-breadcrumbs>

<app-breadcrumbs> renders the trail from a root to the current page — a project list, a client, the record the user is on. The last item is always the current page: text, not a link, marked aria-current="page". Everything before it links back up the hierarchy.

It emits the same .breadcrumb markup react-bootstrap's Breadcrumb does, so the Razor <app-breadcrumbs> and the React <AppBreadcrumbs> render identically on every Webority surface.

Playground

Every meaningful shape of a trail, live. Each change re-renders the real tag helper on the server, so the markup underneath is the exact call that produced the trail above it.

<app-breadcrumbs>
    <app-breadcrumb label="Home" href="/home" />
    <app-breadcrumb label="Projects" href="/projects" />
    <app-breadcrumb label="Acme Corp" />
</app-breadcrumbs>

A simple trail

Compose the trail with <app-breadcrumb> children, root first, current page last. Give a crumb href to link it; the last crumb never links, whether or not you give it one.

Root to current page
Show code 
<app-breadcrumbs>
    <app-breadcrumb label="Projects" href="/projects" />
    <app-breadcrumb label="Acme Corp" />
</app-breadcrumbs>

A leading icon

Give any crumb an icon — a Bootstrap Icons name. A house icon on the root crumb is the common case.

Home, with an icon
Show code 
<app-breadcrumbs>
    <app-breadcrumb icon="house" label="Home" href="/" />
    <app-breadcrumb label="Projects" href="/projects" />
    <app-breadcrumb label="Acme Corp" />
</app-breadcrumbs>

Router-decoupled links

On React, giving a crumb to instead of href routes it through linkComponent when one is provided (react-router's Link), so navigation stays client-side. Razor has no client-side router to decouple from — <app-breadcrumb> only ever emits a plain <a href>, so every navigation is a full page load.

A plain anchor — Razor's only link mode
Show code 
<app-breadcrumbs>
    <app-breadcrumb label="Projects" href="/projects" />
    <app-breadcrumb label="Acme Corp" />
</app-breadcrumbs>
Use href on both surfacesRazor has no to / linkComponent attributes — href is the only way to link a crumb, and it always causes a full page reload since there's no client-side router to hand off to.

When to use

Use it when

  • The page sits several levels deep in a hierarchy the user might want to step back through.
  • You want to state, unambiguously, where the current page is in that hierarchy.
  • The trail is short — a handful of levels, not a full site map.

Reach for something else when

  • The user is switching between peer views of the same record. → app-tabs
  • You need the app's persistent primary navigation. → app-shell
  • The flow is a sequence of steps to complete, not a place in a hierarchy. → app-stepper

Best practices

Do
Short labels, a real link on every ancestor, and the current page as plain text.
Don't
Giving the current page an href doesn't change anything — app-breadcrumbs already ignores it on the last crumb, so this shape only happens if you expect it to link and it won't.

Every option

The whole surface of the component, one cell per value — icon placement, how the current page behaves, an unbounded trail, and where the React linkComponent prop has no Razor counterpart.

icon

icon on the root crumb
icon on every crumb
icon on the current page (last crumb)
(no icon — default)

the current page (last item)

href on the last item is ignored
a single-crumb trail — only the current page
no app-breadcrumb children — an empty <ol>

a long trail — no built-in collapsing

eight levels deep — wraps onto a new line, never collapses
Long trails wrap; they don't truncate<app-breadcrumbs> has no collapse/overflow behaviour of its own — it emits the same .breadcrumb list react-bootstrap does, which simply wraps onto a new line once it runs out of width. For a hierarchy deep enough that this looks noisy, keep the trail to the nearest few levels (e.g. root · parent · current) rather than every level, since the tag helper won't collapse the middle for you.

linkComponent — router-decoupled (React only)

href — Razor's only link mode (equivalent of React's to + linkComponent)
to / linkComponent — React-only, no Razor attribute
No Razor equivalent<app-breadcrumb> only ever emits a plain <a href> — there's no client-side router to decouple from on the Razor surface, so the React to / linkComponent props have no counterpart here. Use href on both surfaces for a normal navigation; a full page reload is expected on Razor sites.

Attributes

AttributeTypeDefaultDescription
iconstring—Bootstrap Icons name for a leading glyph.
labelstring—The crumb's text.
hrefstring—Makes the crumb a link. Ignored on the last crumb — it always renders as text.
to / linkComponent——React-only. Razor has no client-side router to decouple from — use href, which causes a full page navigation.

These are on <app-breadcrumb>; <app-breadcrumbs> itself takes no attributes (the React className prop is also React-only).