LocalizedNavigation

LocalizedNavigation loads the directory tree of one locale from the default content provider and renders it as nested lists: a link per directory and, under an expanded directory, a link per content item. Use it as the sidebar of a documentation site whose content is organized in locale folders.

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

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

@* The English directories of this site's own content, with the pages of the docs directory listed *@
<LocalizedNavigation Title="Documentation"
                     CurrentLocale="en"
                     ExpandedDirectoryId="@docsId" />

@code {
    private string? docsId;

    protected override async Task OnInitializedAsync()
    {
        var directories = await Content.GetDirectoryTreeFromDefaultAsync("en");
        docsId = directories
            .FirstOrDefault(directory => directory.Path.Trim('/').EndsWith("docs", StringComparison.OrdinalIgnoreCase))
            ?.Id;
    }
}

The demo loads the English directories of this site's own content and expands the docs directory, which lists its pages and the packages directory under it. It sets no URL formatter: the default links go to pages of this site.

Usage

@using Osirion.Blazor.Cms.Web.Components

<LocalizedNavigation CurrentLocale="en" ExpandAllDirectories="true" />

A documentation sidebar that takes the locale from the route and opens one directory:

@page "/{Locale}/docs"
@using Osirion.Blazor.Cms.Web.Components

<LocalizedNavigation Title="Documentation"
                     CurrentLocale="@Locale"
                     ExpandedDirectoryId="@OpenDirectoryId" />

@code {
    [Parameter]
    public string Locale { get; set; } = "en";

    private string? OpenDirectoryId { get; set; }
}

The default links go to the public pages: a content link to the item's Url and a directory link to the address its _index.md declares in permalink, otherwise to its path without the locale folder, as ContentBreadcrumbs and DirectoryNavigation build them. Set DirectoryUrlFormatter and ContentUrlFormatter only to link somewhere else.

Parameters

OnLocaleChanged and LocaleNameFormatter are for a locale switcher. The component does not load the list of available locales, because the content provider has no API that returns them, so the switcher never renders and these two parameters have no effect. Use your own language links and pass the chosen locale in CurrentLocale. 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

• Directories are sorted by their order (from _index.md), content items by title. A directory's name is its folder name, or the title from its _index.md.
• An expanded directory shows its content items first (unless ShowContentItems is off), then its subdirectories. A subdirectory shows its own children only when it is expanded too, so ExpandedDirectoryId opens one level.
• With CurrentLocale set, the component shows the top-level directories of that locale, the ones directly below the locale folder. The provider returns the locale's directories at every depth as one list; the component keeps the ones whose parent is not in that list and reaches the rest through each directory's Children, so a nested directory appears once, under its parent. Without a locale, the list holds the root directories, which are the locale folders when your content sits in folders such as en/.
• A directory's _index.md is not listed as a page under its content items: its address is the directory's own link.
• The tree is loaded again on every parameter change. Under static SSR the response is sent with the finished tree.
• With no default provider registered, or when the provider throws, NoContentText is shown. A provider error is logged through ILogger.
• Under static SSR the links are plain links and the callbacks are not raised. In an interactive render mode a link stops the browser from navigating only when its callback is set (OnDirectorySelected for directories, OnContentSelected for content items); without a callback the link navigates, and no handler attribute is written.
• The nav is named by AriaLabel, "Localized navigation" by default. Names and titles are written as text, so they are HTML-encoded.

Styling

The component's scoped stylesheet styles the nav, the heading, the outer list and the loading and empty states. The directory and content entries are built in code, so its rules for osirion-nav-item, osirion-nav-link, osirion-nav-sublist and the content classes do not reach them. Style those classes from your own stylesheet, for example:

.osirion-localized-navigation .osirion-nav-sublist {
    list-style: none;
    padding-left: 1rem;
}

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

Related

• DirectoryNavigation, for a list of directories you load yourself
• Localized Content View
• CMS navigation components