vuepress-theme-plume/docs/en/guide/markdown/file-tree.md

title, createTime, icon, permalink, badge

title	createTime	icon	permalink	badge
File Tree	2025/10/08 14:41:57	mdi:file-tree	/en/guide/markdown/file-tree/	text type Change warning

Overview

In Markdown, you can use the file-tree container to display directory structures with file icons and collapsible subdirectories.

Syntax

Within the ::: file-tree container, use the built-in Markdown unordered list syntax to specify the organization of files and directories. Use nested list items to create subdirectories; to indicate that a directory's contents should not be displayed, simply add a slash / at the end of the list item.

The following syntax can be used to customize the appearance of the file tree:

• Emphasize file or directory names by making them bold, e.g., **README.md**
• Add comments to files or directories by appending a comment starting with # after the name, for example, README.md This is a README file
• Mark files or directories as added or deleted by prefixing the name with ++ or --
• Use ... or … as the name to add placeholder files and directories.
• Add icon="simple" or icon="colored" after :::file-tree to switch to simple icons or colored icons. The default is colored icons.
• Add title="xxxx" after :::file-tree to add a title to the file tree.

Input:

::: file-tree

- docs
  - .vuepress
    - ++ config.ts
  - -- page1.md
  - README.md
- theme  # A **theme** directory
  - client
    - components
      - **Navbar.vue**
    - composables
      - useNavbar.ts
    - styles
      - navbar.css
    - config.ts
  - node/
- package.json
- pnpm-lock.yaml
- .gitignore
- README.md
- …
:::

Output:

::: file-tree

• docs
  • .vuepress
    • ++ config.ts
  • -- page1.md
  • README.md
• theme # A theme directory
  • client
    • components
      • Navbar.vue
    • composables
      • useNavbar.ts
    • styles
      • navbar.css
    • config.ts
  • node/
• package.json
• pnpm-lock.yaml
• .gitignore
• README.md
• … :::

Using Simple Icons

Input:

::: file-tree icon="simple"
- docs
  - .vuepress
    - config.ts
  - page1.md
  - README.md
- package.json
:::

Output:

::: file-tree icon="simple"

• docs
  • .vuepress
    • config.ts
  • page1.md
  • README.md
• package.json :::

Configuration

You can configure the default icon type for file trees in the markdown.fileTree option:

::: code-tabs @tab .vuepress/config.ts

export default defineUserConfig({
  theme: plumeTheme({
    markdown: {
      fileTree: {
        icon: 'simple', // 'simple' | 'colored'
      }
    },
  })
})

:::

::: tip Concerned about colored icons affecting build bundle size? You don't need to worry. The colored icons for the file tree are also resolved from iconify. We recommend installing the @iconify/json package locally in your project. The theme will automatically parse the icon data from @iconify/json into local icon resources. Even if you use the same icon multiple times across different pages (including navigation bars, sidebars, icon components, etc.), only one copy of the resource will exist for each icon!

Each colored icon is approximately 1kb ~ 2kb in size. Even if your file tree extensively uses 100+ different icons, the impact on the final build bundle size will not be significant. :::