A simple breadcrumb navigation component for your Blazor applications.
The package is available on Nuget.
A demo version is aviable on GitHub Pages. :warning: The demo can include changes which have not yet been released.
Add the following lines to your _Imports.razor.
@using Supercode.Blazor.BreadcrumbNavigation
@using Supercode.Blazor.BreadcrumbNavigation.ServicesAdd 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>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);
}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>();
}
}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>- 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.