Breadcrumb Navigation

A simple breadcrumb navigation component for your Blazor applications.

Getting Started

The package is available on Nuget.

Demo

A demo version is aviable on GitHub Pages. :warning: The demo can include changes which have not yet been released.

Usage

Add Imports

Add the following lines to your _Imports.razor.

@using Supercode.Blazor.BreadcrumbNavigation
@using Supercode.Blazor.BreadcrumbNavigation.Services

Add the CascadingBreadcrumbService

Add the <CascadingBreadcrumbService /> as component to your App.razor.

<CascadingBreadcrumbService>
    <Router AppAssembly="@typeof(Program).Assembly">
        <Found Context="routeData">
            <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        </Found>
        <NotFound>
            <LayoutView Layout="@typeof(MainLayout)">
                <p>Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
    </Router>
</CascadingBreadcrumbService>

Create a Breadcrumb

Add a breadcrumb component to your project by usage of the RootBreadcrumb or Breadcrumb base class and an implementation of Configure.
The Link of your breadcrumb is set throught the given BreadcrumbBuilder.

public class IndexBreadcrumb : RootBreadcrumb
{
    public override void Configure(BreadcrumbBuilder builder)
        => builder.Link("Home", string.Empty);
}

Set the created Breadcrumb on a Page

In order to set a breadcrumb you need to inject IBreadcrumbService as cascading parameter.
Set a breadcrumb by calling Set with the type of your breadcrumb and a position.

@code {
    [CascadingParameter]
    private IBreadcrumbService BreadcrumbService { get; set; }

    protected override void OnAfterRender(bool _)
    {
        BreadcrumbService
            .Set<IndexBreadcrumb>();
    }
}

Use BreadcrumbNavigation in MainLayout

Add the BreadcrumbNavigation component in your MainLayout.

<div class="main">
    <div class="top-row px-4">
        <BreadcrumbNavigation/>
    </div>

    <div class="content px-4">
        @Body
    </div>
</div>

Acknowledgments

• A big resource was @chrissainty's Blazored Modal project, where I took most of my inspiration from.
• My buddy @sschwarzrock provided the geranium leaf icon for the package.