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.

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

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

@* The sections of this site's own content: the folders inside the locale folder, with the folders inside them *@
<DirectoryNavigation Title="Sections"
                     Directories="@sections"
                     IsLoading="@(sections is null)"
                     ExpandAllSubdirectories="true"
                     ShowItemCount="false" />

@code {
    private IReadOnlyList<DirectoryItem>? sections;

    protected override async Task OnInitializedAsync()
    {
        // With a locale, the list holds every directory below the locale folder, at any depth. Keep the top level.
        var directories = await Content.GetDirectoryTreeFromDefaultAsync("en");
        sections = directories.Where(directory => directory.Parent?.Parent is null).ToList();
    }
}

The demo lists the sections of this site's own content: the folders inside the English locale folder, and the folder inside Documentation.

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" />

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

    private IReadOnlyList<DirectoryItem>? directories;

    protected override async Task OnInitializedAsync()
    {
        // With a locale, the list holds every directory below the locale folder, at any depth: keep the top level
        var all = await ContentProviderManager.GetDirectoryTreeFromDefaultAsync("en");
        directories = all.Where(directory => directory.Parent?.Parent is null).ToList();
    }
}

With a locale, GetDirectoryTreeFromDefaultAsync returns every directory of that locale below the locale folder, in one flat list and at every depth; without a locale it returns the root directories, which are the locale folders when your content sits in folders such as en/. Each directory's subdirectories are in Children, so to list the sections, keep the directories whose parent is the locale folder, as above. CurrentDirectory and ExpandedDirectory are compared with DirectoryItem.Path, the folder path in the content source.

Parameters

Class goes on the nav. This component does not apply Style or Theme, and other attributes on the tag are captured but not rendered. 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, and only under a top-level directory that is expanded (ExpandedDirectory, or ExpandAllSubdirectories).
• A link goes to the permalink from the directory's _index.md when it has one. Otherwise it goes to the folder path without the locale folder, so en/blog links to /blog. 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 named by AriaLabel, "Directory navigation" by default. Directory names are written as text, so they are HTML-encoded.

Styling

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

Related

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