ContentBreadcrumbs

ContentBreadcrumbs renders a breadcrumb trail for a CMS item: a home link, a link for each directory from the root down to the item's directory, and the item's title. Use it on article and documentation pages, where the trail should follow the content tree rather than the URL.

Package Osirion.Blazor.Cms.Web, namespace Osirion.Blazor.Cms.Web.Components. Source on GitHub.

@using Osirion.Blazor.Cms.Domain.Entities
@using Osirion.Blazor.Cms.Domain.Enums
@using Osirion.Blazor.Cms.Domain.Repositories
@using Osirion.Blazor.Cms.Domain.Services
@using Osirion.Blazor.Cms.Web.Components
@inject IContentProviderManager Content

@* The trail follows the directories of a blog post from this site's own content: Home, Blog and the post's title *@
@if (post is not null)
{
    <ContentBreadcrumbs Content="@post" />
}

@code {
    private ContentItem? post;

    protected override async Task OnInitializedAsync()
    {
        var posts = await Content.GetContentByQueryAsync(new ContentQuery
        {
            Locale = "en",
            Directory = "blog",
            SortBy = SortField.Order,
            SortDirection = SortDirection.Ascending
        });

        post = posts.FirstOrDefault(item => !item.Path.EndsWith("_index.md", StringComparison.OrdinalIgnoreCase));
    }
}

The demo takes a blog post from this site's own content and shows its trail: Home, Blog and the post's title.

Usage

@using Osirion.Blazor.Cms.Web.Components

<ContentBreadcrumbs Content="@Item" />

The component walks up from Item.Directory through each directory's Parent. A documentation page that sets its own home link and directory URLs:

@using Osirion.Blazor.Cms.Domain.Entities
@using Osirion.Blazor.Cms.Web.Components

<ContentBreadcrumbs Content="@Item"
                    Directory="@Item?.Directory"
                    HomeText="Docs"
                    HomeUrl="/docs"
                    DirectoryUrlFormatter="@(directory => $"/{directory.Url.TrimStart('/')}")" />

@code {
    [Parameter]
    public ContentItem? Item { get; set; }
}

A directory's Url is the permalink from its _index.md, and is empty when there is none. Without a formatter, a link goes to that permalink, or, when the folder declares none, to its folder path without the locale folder (blog for en/blog). The locale folder itself (en) has no page and is left out of the trail.

Parameters

Class goes on the nav. Style and Theme are accepted but not written, and other attributes on the tag are captured but not rendered.

Behavior

• The component takes Content.Directory only once, when it is first initialized. If the item can change while the component stays on the page (an interactive page that loads another item), pass Directory as well, as the built-in DocumentPage does.
• A directory's name is its folder name, or the title from its _index.md.
• It renders <nav aria-label="breadcrumb"> around an ordered list. The current item is plain text in a span, not a link. It has no aria-current attribute.
• The / separators are drawn with CSS (::after), not written into the markup. The directory links are written in the component's markup, so its scoped stylesheet reaches them like the home and current crumbs.
• Titles and directory names are written as text, so they are HTML-encoded. No script is needed.

Styling

Links use --osirion-text-secondary and turn --osirion-action-primary on hover; separators use --osirion-text-tertiary.

Related

• OsirionBreadcrumbs, breadcrumbs built from a URL path
• DirectoryNavigation
• CMS navigation components