OsirionContentNavigation

OsirionContentNavigation renders a pair of links to the previous and next item, for example at the end of an article or a documentation page. Give it the current item and it finds the neighbours in the same directory, or pass the neighbours yourself.

Usage

@using Osirion.Blazor.Cms.Web.Components

<OsirionContentNavigation Item="@Item" />

The built-in ArticlePage uses <OsirionContentNavigation Item="Item" ShowDescription ShowPlaceholder />. A documentation page with card links, root-relative URLs and its own labels:

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

<OsirionContentNavigation Item="@Item"
                          Variant="ContentNavigationVariant.Card"
                          ShowDescription="true"
                          PreviousLabel="Previous page"
                          NextLabel="Next page"
                          AriaLabel="Documentation pages"
                          UrlGenerator="@(item => $"/{item.Url.TrimStart('/')}")" />

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

Parameters

Other attributes on the tag are added to the nav.

Behavior

• When a neighbour is missing, the component queries the published items with the same locale whose directory has the same name as Item.Directory, sorted by the order front matter ascending. The items right before and after Item (matched by path) become the neighbours. An item without a directory is compared with all items of its locale. Give the items of a directory distinct order values so the sequence is predictable.
• The nav renders only when Item is set and at least one neighbour exists. With one neighbour it gets the osirion-content-navigation-single class.
• If the lookup fails, the error is logged through ILogger and only the neighbours you passed are shown.
• An item's Url is a path without a leading slash, so the default link is relative to the page's base address. The UrlGenerator in the example makes it root-relative.
• Titles and descriptions are written as text, so they are HTML-encoded. The links are plain anchors and need no script.

Styling

The links use --osirion-border-color, --osirion-background-primary, --osirion-text-primary and --osirion-action-primary, with --osirion-focus-ring-color for keyboard focus. The card variant uses --osirion-card-background, --osirion-card-border-color and --osirion-card-shadow.

Related

• ContentSeriesNavigation, previous and next links inside a series
• ContentBreadcrumbs
• CMS navigation components