Breadcrumb

The Breadcrumb component is a simple spacer tool. It allows sibling HTML elements to have a consistent margin between them.

API Documentation

Example #

The Breadcrumb component is a simple spacer tool. It allows sibling HTML elements to have a consistent margin between them.
RAZOR
<Breadcrumb>
    <BreadcrumbItem Href="#">BlazorExpress.Bulma</BreadcrumbItem>
    <BreadcrumbItem Href="#">Demos</BreadcrumbItem>
    <BreadcrumbItem Href="#">Components</BreadcrumbItem>
    <BreadcrumbItem Href="#" IsActive="true">Breadcrumb</BreadcrumbItem>
</Breadcrumb>

Alignment #

By default, the Breadcrumb component aligns its children to the left. For alternate alignment use the Alignment parameter. The Alignment parameter accepts the following values: Default, Center, and Right.
RAZOR
<Breadcrumb>
    <BreadcrumbItem Href="#">BlazorExpress.Bulma</BreadcrumbItem>
    <BreadcrumbItem Href="#">Demos</BreadcrumbItem>
    <BreadcrumbItem Href="#">Components</BreadcrumbItem>
    <BreadcrumbItem Href="#" IsActive="true">Breadcrumb</BreadcrumbItem>
</Breadcrumb>
In the following examples, the Breadcrumb component is aligned to the center. For this to work, the Alignment parameter must be set to Center.
RAZOR
<Breadcrumb Alignment="BreadcrumbAlignment.Center">
    <BreadcrumbItem Href="#">BlazorExpress.Bulma</BreadcrumbItem>
    <BreadcrumbItem Href="#">Demos</BreadcrumbItem>
    <BreadcrumbItem Href="#">Components</BreadcrumbItem>
    <BreadcrumbItem Href="#" IsActive="true">Breadcrumb</BreadcrumbItem>
</Breadcrumb>
In the following examples, the Breadcrumb component is aligned to the right. For this to work, the Alignment parameter must be set to Right.
RAZOR
<Breadcrumb Alignment="BreadcrumbAlignment.Right">
    <BreadcrumbItem Href="#">BlazorExpress.Bulma</BreadcrumbItem>
    <BreadcrumbItem Href="#">Demos</BreadcrumbItem>
    <BreadcrumbItem Href="#">Components</BreadcrumbItem>
    <BreadcrumbItem Href="#" IsActive="true">Breadcrumb</BreadcrumbItem>
</Breadcrumb>

Icons #

You can add icons to the Breadcrumb component. Add BootstrapIcon or GoogleFontIcon to the BreadcrumbItem component as a child content.
In the following example, Bootstrap icons are used.
RAZOR
<Breadcrumb>
    <BreadcrumbItem Href="#">
        <BootstrapIcon Name="BootstrapIconName.HouseDoorFill">
            BlazorExpress.Bulma
        </BootstrapIcon>
    </BreadcrumbItem>
    <BreadcrumbItem Href="#">
        <BootstrapIcon Name="BootstrapIconName.LaptopFill">
            Demos
        </BootstrapIcon>
    </BreadcrumbItem>
    <BreadcrumbItem Href="#">
        <BootstrapIcon Name="BootstrapIconName.PuzzleFill">
            Components
        </BootstrapIcon>
    </BreadcrumbItem>
    <BreadcrumbItem Href="#" IsActive="true">
        <BootstrapIcon Name="BootstrapIconName.HandThumbsUpFill">
            Breadcrumb
        </BootstrapIcon>
    </BreadcrumbItem>
</Breadcrumb>
In the following example, Google Font icons are used.
RAZOR
<Breadcrumb>
    <BreadcrumbItem Href="#">
        <GoogleFontIcon Name="GoogleFontIconName.Home">
            BlazorExpress.Bulma
        </GoogleFontIcon>
    </BreadcrumbItem>
    <BreadcrumbItem Href="#">
        <GoogleFontIcon Name="GoogleFontIconName.Computer">
            Demos
        </GoogleFontIcon>
    </BreadcrumbItem>
    <BreadcrumbItem Href="#">
        <GoogleFontIcon Name="GoogleFontIconName.Extension">
            Components
        </GoogleFontIcon>
    </BreadcrumbItem>
    <BreadcrumbItem Href="#" IsActive="true">
        <GoogleFontIcon Name="GoogleFontIconName.ThumbUp">
            Breadcrumb
        </GoogleFontIcon>
    </BreadcrumbItem>
</Breadcrumb>

Alternative seperators #

You can change the default separator between BreadcrumbItem components. Use the Separator parameter to change the separator. The Separator parameter accepts the following values: Arrow, Bullet, Dot, and Succeeds.
In the following example, the separator is set to Arrow.
RAZOR
<Breadcrumb Separator="BreadcrumbSeparator.Arrow">
    <BreadcrumbItem Href="#">BlazorExpress.Bulma</BreadcrumbItem>
    <BreadcrumbItem Href="#">Demos</BreadcrumbItem>
    <BreadcrumbItem Href="#">Components</BreadcrumbItem>
    <BreadcrumbItem Href="#" IsActive="true">Breadcrumb</BreadcrumbItem>
</Breadcrumb>
In the following example, the separator is set to Bullet.
RAZOR
<Breadcrumb Separator="BreadcrumbSeparator.Bullet">
    <BreadcrumbItem Href="#">BlazorExpress.Bulma</BreadcrumbItem>
    <BreadcrumbItem Href="#">Demos</BreadcrumbItem>
    <BreadcrumbItem Href="#">Components</BreadcrumbItem>
    <BreadcrumbItem Href="#" IsActive="true">Breadcrumb</BreadcrumbItem>
</Breadcrumb>
In the following example, the separator is set to Dot.
RAZOR
<Breadcrumb Separator="BreadcrumbSeparator.Dot">
    <BreadcrumbItem Href="#">BlazorExpress.Bulma</BreadcrumbItem>
    <BreadcrumbItem Href="#">Demos</BreadcrumbItem>
    <BreadcrumbItem Href="#">Components</BreadcrumbItem>
    <BreadcrumbItem Href="#" IsActive="true">Breadcrumb</BreadcrumbItem>
</Breadcrumb>
In the following example, the separator is set to Succeeds.
RAZOR
<Breadcrumb Separator="BreadcrumbSeparator.Succeeds">
    <BreadcrumbItem Href="#">BlazorExpress.Bulma</BreadcrumbItem>
    <BreadcrumbItem Href="#">Demos</BreadcrumbItem>
    <BreadcrumbItem Href="#">Components</BreadcrumbItem>
    <BreadcrumbItem Href="#" IsActive="true">Breadcrumb</BreadcrumbItem>
</Breadcrumb>

Sizes #

The Breadcrumb component has three sizes: Small, Medium, and Large. Use the Size parameter to change the size.
In the following example, the size is set to Small.
RAZOR
<Breadcrumb Size="BreadcrumbSize.Small">
    <BreadcrumbItem Href="#">BlazorExpress.Bulma</BreadcrumbItem>
    <BreadcrumbItem Href="#">Demos</BreadcrumbItem>
    <BreadcrumbItem Href="#">Components</BreadcrumbItem>
    <BreadcrumbItem Href="#" IsActive="true">Breadcrumb</BreadcrumbItem>
</Breadcrumb>
In the following example, the size is set to Medium.
RAZOR
<Breadcrumb Size="BreadcrumbSize.Medium">
    <BreadcrumbItem Href="#">BlazorExpress.Bulma</BreadcrumbItem>
    <BreadcrumbItem Href="#">Demos</BreadcrumbItem>
    <BreadcrumbItem Href="#">Components</BreadcrumbItem>
    <BreadcrumbItem Href="#" IsActive="true">Breadcrumb</BreadcrumbItem>
</Breadcrumb>
In the following example, the size is set to Large.
RAZOR
<Breadcrumb Size="BreadcrumbSize.Large">
    <BreadcrumbItem Href="#">BlazorExpress.Bulma</BreadcrumbItem>
    <BreadcrumbItem Href="#">Demos</BreadcrumbItem>
    <BreadcrumbItem Href="#">Components</BreadcrumbItem>
    <BreadcrumbItem Href="#" IsActive="true">Breadcrumb</BreadcrumbItem>
</Breadcrumb>
If you like BlazorExpress.Bulma, give it a star on GitHub!