Breadcrumbs
Use the koala-breadcrumbs tag helper
for page navigation. Renders a back button on mobile and a full breadcrumb trail on desktop.
Every new page must implement IBreadcrumbPage.
This tag helper is in the Portal project only.
Mobile view
On mobile, breadcrumbs render as a single back link to the parent page. Shows an arrow icon and the parent page name.
<!-- Mobile: shown on small screens, hidden on sm+ -->
<a href="/partner/quotes"
class="flex items-center gap-1 text-sm text-gray-500
dark:text-gray-400 hover:text-gray-700
dark:hover:text-gray-200 sm:hidden">
<svg ...>
<path d="m15 18-6-6 6-6"></path>
</svg>
Quotes
</a>
Desktop view
On desktop, the full breadcrumb trail is shown with a home icon, chevron separators, and the current page as non-linked text.
<!-- Desktop: hidden on mobile, shown on sm+ -->
<nav class="hidden sm:flex items-center gap-2 text-sm">
<a href="/" class="text-gray-400 dark:text-gray-500
hover:text-gray-500 dark:hover:text-gray-400">
<svg ...>
<path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path>
<path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
</svg>
</a>
<svg ...><path d="m9 18 6-6-6-6"></path></svg>
<a href="/partner/quotes" class="text-gray-500 dark:text-gray-400
hover:text-gray-700 dark:hover:text-gray-200">Quotes</a>
<svg ...><path d="m9 18 6-6-6-6"></path></svg>
<span class="font-medium text-gray-900 dark:text-white">Q-1001</span>
</nav>
Deeper nesting
Breadcrumbs support any depth. Each intermediate item is a link; only the last item is plain text.
<!-- In your PageModel -->
public IReadOnlyList<Breadcrumb> Breadcrumbs => new[]
{
new Breadcrumb("Partners", "/conveyancing/partners"),
new Breadcrumb("Greenfield Solicitors", "/conveyancing/partners/view/abc"),
new Breadcrumb("Team"),
};
<!-- In your .cshtml -->
<div koala-breadcrumbs="@Model.Breadcrumbs"></div>
Usage
Add the tag helper to your page and implement IBreadcrumbPage
on your page model.
<!-- .cshtml -->
<div koala-breadcrumbs="@Model.Breadcrumbs"></div>
// PageModel
public class ViewQuotePageModel : PageModel, IBreadcrumbPage
{
public IReadOnlyList<Breadcrumb> Breadcrumbs => new[]
{
new Breadcrumb("Quotes", "/partner/quotes"),
new Breadcrumb(Quote.DisplayReference),
};
}
Attributes
Tag helper attributes.
| Attribute | Type | Description |
|---|---|---|
| koala-breadcrumbs | IReadOnlyList<Breadcrumb> | List of breadcrumb items. Last item is the current page (not linked). |
| koala-breadcrumbs-home-url | string? | Override the home icon link URL. Defaults to the area root. |
| koala-breadcrumbs-home-label | string? | Accessible label for the home icon. Defaults to "Home". |
Breadcrumb banner
Use koala-breadcrumb-banner
for the standard top-of-page strip that wraps breadcrumbs with a white background, a separator border, and an
optional share-link button on the right. Sits directly under the navbar on every authenticated detail page;
suppresses itself entirely when no breadcrumbs are passed.
<koala-breadcrumb-banner breadcrumbs="@Model.Breadcrumbs"
home-url="/conveyancing"
home-label="My Koala"
share-title="@(ViewData["ShareTitle"] as string)"
share-url="@(ViewData["ShareUrl"] as string)" />
| Attribute | Type | Description |
|---|---|---|
| breadcrumbs | IReadOnlyList<Breadcrumb> | List of breadcrumb items. Banner suppresses itself if empty. |
| home-url | string | URL for the home icon. Pass the area's home URL. |
| home-label | string | Accessible label for the home icon. Defaults to "Home". |
| share-title | string? | If set, renders a Share button on the right that copies share-url to the clipboard. |
| share-url | string? | URL the Share button copies. Required when share-title is set. |
| max-width | string | Tailwind max-width class for the inner container. Defaults to max-w-screen-2xl. |
| padding | string | Horizontal padding classes for responsive layouts. Defaults to px-4 sm:px-6 md:px-0. |
Breadcrumb model
Each Breadcrumb has a label and optional URL.
When URL is null (the last item), it renders as non-linked text with font-medium.
// With URL (linked)
new Breadcrumb("Quotes", "/partner/quotes")
// Without URL (current page, non-linked)
new Breadcrumb("Q-1001")