FileTree | Monoline Docs

Skip to content

On this page

content
- index.md
- writing.md
monoline-docs.yml

import FileTree from "@chitrank2050/monoline-docs/components/FileTree.astro";

<FileTree
  items={[
    {
      name: "content",
      children: [
        { name: "index.md" },
        { name: "writing.md", highlight: true },
      ],
    },
    { name: "monoline-docs.yml" },
  ]}
/>

View code

import FileTree from "@chitrank2050/monoline-docs/components/FileTree.astro";

<FileTree
  items={[
    {
      name: "content",
      children: [
        { name: "index.md" },
        { name: "writing.md", highlight: true },
      ],
    },
    { name: "monoline-docs.yml" },
  ]}
/>

Usage

Folders use native disclosures and default to expanded. expanded applies only to folders; highlight marks a file or folder. Cycles and more than 20 nested folders are rejected.

Initially collapsed folder

assets
- favicon.svg

import FileTree from "@chitrank2050/monoline-docs/components/FileTree.astro";

<FileTree
  label="Assets"
  items={[
    {
      name: "assets",
      expanded: false,
      children: [{ name: "favicon.svg" }],
    },
  ]}
/>

View code

import FileTree from "@chitrank2050/monoline-docs/components/FileTree.astro";

<FileTree
  label="Assets"
  items={[
    {
      name: "assets",
      expanded: false,
      children: [{ name: "favicon.svg" }],
    },
  ]}
/>

API reference

FileTree props
Name	Type	Default	Description
`items`	`Entry[]`	`Required`	Entries have name and optional children, expanded and highlight.
`label`	`string`	`Project files`	Accessible group label.

Behavior and accessibility

Folders use native details controls. Enter or Space toggles the focused folder; file labels remain readable without JavaScript.

Using componentsLearn how to compose documentation with authoring components.Writing pagesLearn how to use components in Markdown and MDX.