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.

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, links go to /{directory.Path}, the folder path in the content source, which can include the locale folder and is not always a page on your site.

Parameters

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

In 4.0 the directory crumbs are built in code, so the component's scoped stylesheet does not reach them: they get no separator and no link style, while the home and current crumbs do. Until that changes, add the rules to your own stylesheet:

.osirion-breadcrumbs .osirion-breadcrumbs-item {
    display: flex;
    align-items: center;
}

.osirion-breadcrumbs .osirion-breadcrumbs-item:not(:last-child)::after {
    content: "/";
    margin: 0 0.5rem;
    color: var(--osirion-text-tertiary, #9ca3af);
}

.osirion-breadcrumbs .osirion-breadcrumbs-link {
    color: var(--osirion-text-secondary, #6b7280);
    text-decoration: none;
}

Related

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