M
Marai.UI v1.0.0-alpha.7

Breadcrumb

A composable breadcrumb navigation component for representing hierarchical page locations. Accessible, router-agnostic, and fully styleable.

Overview

The MBreadcrumb component provides a structured way to show the user's current location within a page hierarchy. It is built from five composable parts — MBreadcrumb, MBreadcrumbItem, MBreadcrumbLink, MBreadcrumbPage, and MBreadcrumbSeparator — giving you full control over the trail, separators, and current page indicator. The component is router-agnostic: links are plain <a> elements that work with any Blazor routing strategy. All sub-components expose a Class parameter and pass through arbitrary HTML attributes.

Usage

Add the namespace import to use the component.

razor 
@using Marai.UI.Components.MBreadcrumb

Basic Usage

A standard breadcrumb trail with navigable links and a current page item:

Preview
razor 
<MBreadcrumb ListClass="flex flex-wrap items-center gap-1.5 text-sm text-slate-500 sm:gap-2.5">
    <MBreadcrumbItem Class="inline-flex items-center gap-1.5">
        <MBreadcrumbLink Href="/" Class="transition-colors hover:text-slate-900">Home</MBreadcrumbLink>
    </MBreadcrumbItem>
    <MBreadcrumbSeparator Class="inline-flex items-center" />
    <MBreadcrumbItem Class="inline-flex items-center gap-1.5">
        <MBreadcrumbLink Href="/docs/components" Class="transition-colors hover:text-slate-900">Components</MBreadcrumbLink>
    </MBreadcrumbItem>
    <MBreadcrumbSeparator Class="inline-flex items-center" />
    <MBreadcrumbItem Class="inline-flex items-center gap-1.5">
        <MBreadcrumbPage Class="font-normal text-slate-900">Breadcrumb</MBreadcrumbPage>
    </MBreadcrumbItem>
</MBreadcrumb>

Examples

Active / Current Item

Use MBreadcrumbPage for the current location. It renders as a <span> with aria-current="page". Apply your own classes to visually distinguish the active item from navigable links.

Preview
razor 
<MBreadcrumb ListClass="flex flex-wrap items-center gap-1.5 text-sm text-slate-500 sm:gap-2.5">
    <MBreadcrumbItem Class="inline-flex items-center gap-1.5">
        <MBreadcrumbLink Href="/" Class="transition-colors hover:text-slate-900">Home</MBreadcrumbLink>
    </MBreadcrumbItem>
    <MBreadcrumbSeparator Class="inline-flex items-center" />
    <MBreadcrumbItem Class="inline-flex items-center gap-1.5">
        <MBreadcrumbLink Href="/settings" Class="transition-colors hover:text-slate-900">Settings</MBreadcrumbLink>
    </MBreadcrumbItem>
    <MBreadcrumbSeparator Class="inline-flex items-center" />
    <MBreadcrumbItem Class="inline-flex items-center gap-1.5">
        <MBreadcrumbPage Class="font-medium text-slate-900">Profile</MBreadcrumbPage>
    </MBreadcrumbItem>
</MBreadcrumb>

Custom Separator

Pass any content as ChildContent to MBreadcrumbSeparator to replace the default / with a custom character or SVG icon.

Preview
razor 
<MBreadcrumb ListClass="flex flex-wrap items-center gap-1.5 text-sm text-slate-500 sm:gap-2.5">
    <MBreadcrumbItem Class="inline-flex items-center gap-1.5">
        <MBreadcrumbLink Href="/" Class="transition-colors hover:text-slate-900">Home</MBreadcrumbLink>
    </MBreadcrumbItem>
    <MBreadcrumbSeparator Class="inline-flex items-center">
        <svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2"
             stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" aria-hidden="true">
            <polyline points="9 18 15 12 9 6"/>
        </svg>
    </MBreadcrumbSeparator>
    <MBreadcrumbItem Class="inline-flex items-center gap-1.5">
        <MBreadcrumbLink Href="/docs" Class="transition-colors hover:text-slate-900">Docs</MBreadcrumbLink>
    </MBreadcrumbItem>
    <MBreadcrumbSeparator Class="inline-flex items-center">
        <svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2"
             stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" aria-hidden="true">
            <polyline points="9 18 15 12 9 6"/>
        </svg>
    </MBreadcrumbSeparator>
    <MBreadcrumbItem Class="inline-flex items-center gap-1.5">
        <MBreadcrumbPage Class="font-normal text-slate-900">Components</MBreadcrumbPage>
    </MBreadcrumbItem>
</MBreadcrumb>

Class Override

Use the Class parameter on any sub-component to supply all Tailwind utility classes. No default styling is applied — developers have complete control over appearance.

Preview
razor 
<MBreadcrumb ListClass="flex flex-wrap items-center gap-2 text-base text-slate-500">
    <MBreadcrumbItem Class="inline-flex items-center gap-1.5">
        <MBreadcrumbLink Href="/" Class="font-semibold transition-colors hover:text-slate-900">Home</MBreadcrumbLink>
    </MBreadcrumbItem>
    <MBreadcrumbSeparator Class="inline-flex items-center" />
    <MBreadcrumbItem Class="inline-flex items-center gap-1.5">
        <MBreadcrumbPage Class="text-blue-600 font-medium">Dashboard</MBreadcrumbPage>
    </MBreadcrumbItem>
</MBreadcrumb>

Customization

Custom Tailwind CSS Classes

Use the Class parameter on each sub-component to add Tailwind utility classes. The ListClass parameter on MBreadcrumb targets the inner <ol> separately. Default classes provide accessible link and muted-text styling — additional classes are merged last-wins.

razor 
<MBreadcrumb ListClass="flex flex-wrap items-center gap-2 text-base text-slate-500">
    <MBreadcrumbItem Class="inline-flex items-center gap-1.5">
        <MBreadcrumbLink Href="/" Class="font-semibold transition-colors hover:text-slate-900">Home</MBreadcrumbLink>
    </MBreadcrumbItem>
    <MBreadcrumbSeparator Class="inline-flex items-center" />
    <MBreadcrumbItem Class="inline-flex items-center gap-1.5">
        <MBreadcrumbPage Class="text-blue-600 font-medium">Current Page</MBreadcrumbPage>
    </MBreadcrumbItem>
</MBreadcrumb>

Standard HTML Attributes

All sub-components support arbitrary HTML attributes via AdditionalAttributes. Pass target, rel, ARIA attributes, or data attributes directly on the component tag.

razor 
<MBreadcrumbLink Href="/" target="_blank" rel="noopener">Home</MBreadcrumbLink>
Customization Examples
  • Font size: ListClass="text-base ..." on MBreadcrumb to set overall size
  • Font weight: Class="font-semibold ..." on MBreadcrumbLink for emphasis
  • Link color: Class="text-blue-600 ..." on MBreadcrumbLink
  • Current page: Class="text-blue-600 font-medium" on MBreadcrumbPage
  • Spacing: ListClass="... gap-3" on MBreadcrumb to adjust gap between items
  • External links: target="_blank" rel="noopener" on MBreadcrumbLink
  • Accessibility: aria-label="..." on MBreadcrumb to override the default label

Accessibility

  • The root element renders as a <nav> with aria-label="breadcrumb" by default
  • Items are rendered inside an <ol> for proper list semantics
  • The current page uses aria-current="page" on its <span> element
  • Separators are rendered as <li> elements with aria-hidden="true" to keep them out of the accessibility tree
  • Links are plain <a> elements — keyboard-navigable and screen-reader-friendly by default
  • All components accept arbitrary ARIA attributes via AdditionalAttributes

API Reference

MBreadcrumb

Parameter Type Default Description
ChildContent RenderFragment? null One or more MBreadcrumbItem and MBreadcrumbSeparator components.
Class string? null CSS classes applied to the outer <nav> element.
ListClass string? null CSS classes applied to the inner <ol> list element.
AdditionalAttributes Dictionary<string, object>? null Arbitrary HTML attributes passed through to the <nav> element.

MBreadcrumbItem

Parameter Type Default Description
ChildContent RenderFragment? null A MBreadcrumbLink or MBreadcrumbPage component.
Class string? null CSS classes applied to the <li> element.
AdditionalAttributes Dictionary<string, object>? null Arbitrary HTML attributes passed through to the <li> element.

MBreadcrumbLink

Parameter Type Default Description
Href string? null The navigation target URL for the breadcrumb link.
ChildContent RenderFragment? null The link label text or content.
Class string? null CSS classes applied to the <a> element.
AdditionalAttributes Dictionary<string, object>? null Arbitrary HTML attributes passed through (e.g. target, rel).

MBreadcrumbPage

Parameter Type Default Description
ChildContent RenderFragment? null The label for the current active page. Renders with aria-current="page".
Class string? null CSS classes applied to the <span> element.
AdditionalAttributes Dictionary<string, object>? null Arbitrary HTML attributes passed through to the <span> element.

MBreadcrumbSeparator

Parameter Type Default Description
ChildContent RenderFragment? null Custom separator content. Defaults to / when omitted.
Class string? null CSS classes applied to the separator <li> element.
AdditionalAttributes Dictionary<string, object>? null Arbitrary HTML attributes passed through to the <li> element.