BlazorExpress.Bulma | An enterprise-class component library built with the Blazor and Bulma CSS frameworks

How it works #

The Breadcrumb component displays a navigation trail, helping users understand their current location within the application hierarchy and easily navigate back to previous sections.

How to use:

Add the Breadcrumb component to your page.
Define each navigation step using BreadcrumbItem components, setting the Href for navigation and IsActive="true" for the current page.
Customize the breadcrumb by adding, removing, or reordering BreadcrumbItem elements as needed.

This demo shows a basic breadcrumb setup with four navigation steps, highlighting the current page.

Example
View Source

<Breadcrumb>
    <BreadcrumbItem Href="#">BlazorExpress.Bulma</BreadcrumbItem>
    <BreadcrumbItem Href="#">Demos</BreadcrumbItem>
    <BreadcrumbItem Href="#">Components</BreadcrumbItem>
    <BreadcrumbItem Href="#" IsActive="true">Breadcrumb</BreadcrumbItem>
</Breadcrumb>

Alignment #

The Breadcrumb component supports alignment options to fit your layout needs.

How to use:

Use the Alignment parameter to control breadcrumb alignment.
Omit the parameter for default (left) alignment.

The following demo shows the default (left-aligned) breadcrumb.

Example
View Source

<Breadcrumb>
    <BreadcrumbItem Href="#">BlazorExpress.Bulma</BreadcrumbItem>
    <BreadcrumbItem Href="#">Demos</BreadcrumbItem>
    <BreadcrumbItem Href="#">Components</BreadcrumbItem>
    <BreadcrumbItem Href="#" IsActive="true">Breadcrumb</BreadcrumbItem>
</Breadcrumb>

To center the breadcrumb, set Alignment="BreadcrumbAlignment.Center".

How to use:

Add the Alignment parameter with value BreadcrumbAlignment.Center to the Breadcrumb component.

This demo displays a centered breadcrumb navigation.

Example
View Source

<Breadcrumb Alignment="BreadcrumbAlignment.Center">
    <BreadcrumbItem Href="#">BlazorExpress.Bulma</BreadcrumbItem>
    <BreadcrumbItem Href="#">Demos</BreadcrumbItem>
    <BreadcrumbItem Href="#">Components</BreadcrumbItem>
    <BreadcrumbItem Href="#" IsActive="true">Breadcrumb</BreadcrumbItem>
</Breadcrumb>

To right-align the breadcrumb, set Alignment="BreadcrumbAlignment.Right".

How to use:

Add the Alignment parameter with value BreadcrumbAlignment.Right to the Breadcrumb component.

This demo shows a right-aligned breadcrumb navigation.

Example
View Source

<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 enhance breadcrumbs with icons for better visual context.

How to use Bootstrap Icons:

Wrap the breadcrumb label inside a BootstrapIcon component within each BreadcrumbItem.
Set the Name property to the desired icon.

This demo uses Bootstrap icons for each breadcrumb step.

Example
View Source

<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>

How to use Google Font Icons:

Wrap the breadcrumb label inside a GoogleFontIcon component within each BreadcrumbItem.
Set the Name property to the desired Google Font icon.

This demo uses Google Font icons for each breadcrumb step.

Example
View Source

<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 #

The Breadcrumb component supports different separator styles to match your application's design.

How to use:

Set the Separator parameter on the Breadcrumb component.
Choose from BreadcrumbSeparator.Arrow, Bullet, Dot, or Succeeds.

This demo uses the Arrow separator.

Example
View Source

<Breadcrumb Separator="BreadcrumbSeparator.Arrow">
    <BreadcrumbItem Href="#">BlazorExpress.Bulma</BreadcrumbItem>
    <BreadcrumbItem Href="#">Demos</BreadcrumbItem>
    <BreadcrumbItem Href="#">Components</BreadcrumbItem>
    <BreadcrumbItem Href="#" IsActive="true">Breadcrumb</BreadcrumbItem>
</Breadcrumb>

This demo uses the Bullet separator. Set Separator="BreadcrumbSeparator.Bullet" to apply this style.

Example
View Source

<Breadcrumb Separator="BreadcrumbSeparator.Bullet">
    <BreadcrumbItem Href="#">BlazorExpress.Bulma</BreadcrumbItem>
    <BreadcrumbItem Href="#">Demos</BreadcrumbItem>
    <BreadcrumbItem Href="#">Components</BreadcrumbItem>
    <BreadcrumbItem Href="#" IsActive="true">Breadcrumb</BreadcrumbItem>
</Breadcrumb>

This demo uses the Dot separator. Set Separator="BreadcrumbSeparator.Dot" to apply this style.

Example
View Source

<Breadcrumb Separator="BreadcrumbSeparator.Dot">
    <BreadcrumbItem Href="#">BlazorExpress.Bulma</BreadcrumbItem>
    <BreadcrumbItem Href="#">Demos</BreadcrumbItem>
    <BreadcrumbItem Href="#">Components</BreadcrumbItem>
    <BreadcrumbItem Href="#" IsActive="true">Breadcrumb</BreadcrumbItem>
</Breadcrumb>

This demo uses the Succeds separator. Set Separator="BreadcrumbSeparator.Succeeds" to apply this style.

Example
View Source

<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 can be displayed in different sizes to fit your UI.

How to use:

Set the Size parameter on the Breadcrumb component.
Choose from BreadcrumbSize.Small, Medium, or Large.

This demo shows a small breadcrumb (Size="BreadcrumbSize.Small").

Example
View Source

<Breadcrumb Size="BreadcrumbSize.Small">
    <BreadcrumbItem Href="#">BlazorExpress.Bulma</BreadcrumbItem>
    <BreadcrumbItem Href="#">Demos</BreadcrumbItem>
    <BreadcrumbItem Href="#">Components</BreadcrumbItem>
    <BreadcrumbItem Href="#" IsActive="true">Breadcrumb</BreadcrumbItem>
</Breadcrumb>

This demo shows a medium breadcrumb (Size="BreadcrumbSize.Medium").

Example
View Source

<Breadcrumb Size="BreadcrumbSize.Medium">
    <BreadcrumbItem Href="#">BlazorExpress.Bulma</BreadcrumbItem>
    <BreadcrumbItem Href="#">Demos</BreadcrumbItem>
    <BreadcrumbItem Href="#">Components</BreadcrumbItem>
    <BreadcrumbItem Href="#" IsActive="true">Breadcrumb</BreadcrumbItem>
</Breadcrumb>

This demo shows a large breadcrumb (Size="BreadcrumbSize.Large").

Example
View Source

<Breadcrumb Size="BreadcrumbSize.Large">
    <BreadcrumbItem Href="#">BlazorExpress.Bulma</BreadcrumbItem>
    <BreadcrumbItem Href="#">Demos</BreadcrumbItem>
    <BreadcrumbItem Href="#">Components</BreadcrumbItem>
    <BreadcrumbItem Href="#" IsActive="true">Breadcrumb</BreadcrumbItem>
</Breadcrumb>

Breadcrumb

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

How it works #

Alignment #

Icons #

Alternative seperators #

Sizes #

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