TreeMenucomponent

TreeMenu({ path = "/", tree }: TreeMenuProps): ReactNode

Param	Type
`props`	`TreeMenuProps`	Props for the TreeMenu component — the root tree element plus its URL path. required
`.tree`	`TreeElement`	Root element whose children become the navigation links. required readonly
`.path`	`AbsolutePath`	URL path of the root — children get `path + their.name`. Defaults to `/`. readonly

Return
`ReactNode`	A `<Menu>` of navigation links to the root's children.

Sidebar navigation menu built from the children of a root tree element.

Renders each child via <TreeMenuItem> (the default mapping for tree-element).
To customise renderers for specific types, wrap in <TreeMenuMapping mapping={…}>.
Only directories and files appear — code symbols are kept off the navigation.

A sidebar navigation menu built from the children of a root tree element. Each child renders as a menu item; items with menu-eligible children of their own reveal a nested submenu based on the current URL.

Things to know:

Only directories and files appear, plus documentation symbols of kind: "module" — functions, classes, methods, properties, etc. are kept off the navigation (they still get their own pages via <TreeApp>).
Each item computes its own href by appending its name to the parent path (defaulting to /).
It is a [Mapping, Mapper] pair: wrap any subtree in <TreeMenuMapping mapping={…}> to swap the per-type menu-item renderer without touching the rest of the site. <TreeSidebar> shares this same mapper.
Use it directly for finer layout control; otherwise <TreeApp> wires a <TreeSidebar> (a home link plus this menu) for you.

Usage

tsx

import { TreeMenu } from "shelving/ui";

// Just the navigation menu from a subtree's children.
<TreeMenu tree={section} path="/docs" />

Override the menu-item renderer for one element type:

tsx

import { TreeApp, TreeMenuMapping } from "shelving/ui";

<TreeMenuMapping mapping={{ "tree-element": MyMenuItem }}>
  <TreeApp tree={tree} />
</TreeMenuMapping>

Examples

<TreeMenu tree={tree} />