BreadCrumb alignment

Radzen.Blazor Components
1

Hi Radzen Team.

I detected a problem using your BreadCrumb component, related to the alignment when using a RadzenBreadCrumbItem without a Path. This happens when I use first a RadzenBreadCrumbItem for the home with Path and Text with generates a div element with the a element inside which has the span element inside as well, then when I use a second RadzenBreadCrumbItem for the current page with Text only it generates a div element with the label element inside but not with the same height as the first RadzenBreadCrumbItem. If I set the Path in the second RadzenBreadCrumbItem the problem seems to be fixed...

image

image

<RadzenBreadCrumb class="float-sm-right mb-2">
    <RadzenBreadCrumbItem Path="/" Text="Home" />
    <RadzenBreadCrumbItem Text="Dashboard" />
</RadzenBreadCrumb>

<RadzenBreadCrumb class="float-sm-right mb-2">
    <RadzenBreadCrumbItem Path="/" Text="Home" />
    <RadzenBreadCrumbItem Path="/dashboard" Text="Dashboard" />
</RadzenBreadCrumb>
2

Thanks for reporting that, @deutschland2k. The problem is with the <a> being rendered as a block element. The following CSS fixes the misalignment:

.rz-breadcrumb-item .rz-link {
    display: inline-flex;
}

Fixing the component with next release.

3

You're welcome @yordanov! Always a pleasure to help.