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.

Usage

@using Osirion.Blazor.Cms.Web.Components

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

A documentation sidebar that takes the locale from the route and links to the public URLs:

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

<LocalizedNavigation Title="Documentation"
                     CurrentLocale="@Locale"
                     ExpandAllDirectories="true"
                     DirectoryUrlFormatter="@(directory => $"/{directory.Url.TrimStart('/')}")"
                     ContentUrlFormatter="@(item => $"/{item.Url.TrimStart('/')}")" />

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

Pass both formatters. Without them, directory links go to /{directory.Path} and content links to /{item.Path}, the folder and file paths in the content source (a content path ends in .md), which are not pages on your site. A directory's Url is the permalink from its _index.md; an item's Url is the address the CMS gives it.

Parameters

The component also declares OnLocaleChanged and LocaleNameFormatter for a locale switcher. In 4.0 it does not load the list of available locales, so the switcher never renders and these two parameters have no effect. Use your own language links and pass the chosen locale in CurrentLocale. 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, then its subdirectories. A subdirectory shows its own children only when it is expanded too, so ExpandedDirectoryId opens one level.
• If your content sits in locale folders such as en/, the locale folder is the only top-level directory of that locale, so the tree starts with a single link to it. Set ExpandAllDirectories, or pass the folder's Id in ExpandedDirectoryId, to show what is inside.
• The tree is loaded again on every parameter change. Under static SSR the response is sent with the finished tree.
• If the provider throws, the error is logged through ILogger and the empty-state text is shown.
• Under static SSR the links are plain links and the callbacks are not raised.
• The tree is a nav without an accessible name. 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. In 4.0 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