FileTree

FileTree and FileTreeItem render a nested folder-and-file diagram with glyphs, comments, and highlights : the docs-friendly answer to "show me the layout." Fully static markup, no JS.

Basic use

content
- docs
  - introduction.md
  - getting-started
    - installation.md
    - quick-start.md

<FileTree>
<FileTreeItem Name="content" IsFolder="true">
<FileTreeItem Name="docs" IsFolder="true">
<FileTreeItem Name="introduction.md" />
<FileTreeItem Name="getting-started" IsFolder="true">
<FileTreeItem Name="installation.md" />
<FileTreeItem Name="quick-start.md" />
</FileTreeItem>
</FileTreeItem>
</FileTreeItem>
</FileTree>

Comments

Comment renders a muted annotation after the file name : great for calling out what a file is for.

Program.csWires AddShellDocs / MapShellDocs
App.razorHead + link to tokens.css
contentAll docs pages live here
- docs
  - introduction.md
  - meta.jsonSidebar ordering only

<FileTree>
<FileTreeItem Name="Program.cs" Comment="Wires AddShellDocs / MapShellDocs" />
<FileTreeItem Name="App.razor" Comment="Head + link to tokens.css" />
<FileTreeItem Name="content" IsFolder="true" Comment="All docs pages live here">
<FileTreeItem Name="docs" IsFolder="true">
<FileTreeItem Name="introduction.md" />
<FileTreeItem Name="meta.json" Comment="Sidebar ordering only" />
</FileTreeItem>
</FileTreeItem>
</FileTree>

Highlight

Set Highlight="true" on any item to give it an accent background : useful for pointing at what a step created or what the reader should focus on.

docs
- MyDocs.DocsScaffolded by shelldocs init
  - Program.cs
  - content

<FileTree>
<FileTreeItem Name="docs" IsFolder="true">
<FileTreeItem Name="MyDocs.Docs" IsFolder="true" Highlight="true" Comment="Scaffolded by shelldocs init">
<FileTreeItem Name="Program.cs" />
<FileTreeItem Name="content" IsFolder="true" />
</FileTreeItem>
</FileTreeItem>
</FileTree>

Deep nesting

There's no depth cap : nest as far as needed. The glyph size and indentation stay consistent.

src
- ShellDocs.Components
  - Content
    - Callout.razor
    - Card.razor
    - Steps.razor
  - Chrome
    - DocsHeader.razor
    - DocsSidebar.razor

<FileTree>
<FileTreeItem Name="src" IsFolder="true">
<FileTreeItem Name="ShellDocs.Components" IsFolder="true">
<FileTreeItem Name="Content" IsFolder="true">
<FileTreeItem Name="Callout.razor" />
<FileTreeItem Name="Card.razor" />
<FileTreeItem Name="Steps.razor" />
</FileTreeItem>
<FileTreeItem Name="Chrome" IsFolder="true">
<FileTreeItem Name="DocsHeader.razor" />
<FileTreeItem Name="DocsSidebar.razor" />
</FileTreeItem>
</FileTreeItem>
</FileTreeItem>
</FileTree>

Props

FileTree

Prop	Type	Default	Description
`ChildContent`	`RenderFragment?`	`—`	FileTreeItem children forming the root list.

FileTreeItem

Prop	Type	Default	Description
`Name`Required	`string`	—	File or folder name displayed on the row.
`IsFolder`	`bool`	`false`	When true, renders a folder glyph and allows nested FileTreeItem children.
`Comment`	`string?`	`—`	Muted annotation displayed after the name.
`Highlight`	`bool`	`false`	Emphasizes the row with an accent background.
`ChildContent`	`RenderFragment?`	`—`	Nested items. Only rendered when IsFolder is true.

FileTree

Basic use

Comments

Highlight

Deep nesting

Props

FileTree

FileTreeItem

See also