DirectoryNavigation

DirectoryNavigation renders a list of links to the CMS directories you give it, and can show one level of subdirectories under each. It does not load anything itself: you pass the directories, which keeps it usable for any part of the content tree.

Usage

@using Osirion.Blazor.Cms.Web.Components

<DirectoryNavigation Directories="@directories" />

A sidebar that loads the top-level directories of one locale, marks the current one and expands it:

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

<DirectoryNavigation Title="Sections"
                     Directories="@directories"
                     IsLoading="@(directories is null)"
                     CurrentDirectory="@CurrentPath"
                     ExpandedDirectory="@CurrentPath"
                     ShowItemCount="false"
                     DirectoryUrlFormatter="@(directory => $"/{directory.Url.TrimStart('/')}")" />

@code {
    [Parameter]
    public string? CurrentPath { get; set; }

    private IReadOnlyList<DirectoryItem>? directories;

    protected override async Task OnInitializedAsync()
    {
        directories = await ContentProviderManager.GetDirectoryTreeFromDefaultAsync("en");
    }
}

GetDirectoryTreeFromDefaultAsync returns the directories without a parent; their subdirectories are in Children. If your content sits in locale folders such as en/, the locale folder is the only directory without a parent, so pass its Children to list the sections inside it. CurrentDirectory and ExpandedDirectory are compared with DirectoryItem.Path, the folder path in the content source.

Parameters

This component does not apply Class or other attributes in 4.0. Wrap it in your own element to style it.

Behavior

• Only one level of subdirectories is rendered, even when they have children of their own.
• A directory's Url is the permalink from its _index.md and is empty when there is none, so the default link is / for directories without a permalink. A permalink that starts with a slash would produce //...; the formatter in the example trims it. A directory's name is its folder name, or the title from its _index.md.
• Under static SSR the links are plain links and DirectoryClicked is not called. In an interactive render mode with DirectoryClicked set, the click runs your callback instead of navigating, so you decide what happens.
• The list is wrapped in a nav without an accessible name. Directory names are written as text, so they are HTML-encoded.

Styling

Colors come from --osirion-text-primary, --osirion-text-secondary, --osirion-action-primary and --osirion-background-secondary.

Related

• LocalizedNavigation, which loads the tree itself and lists content items
• ContentBreadcrumbs
• CMS navigation components