TreeSidebarcomponent

TreeSidebar({ tree, path = "/" as AbsolutePath }: TreeSidebarProps): ReactNode
ParamType
propsTreeSidebarProps
Props for the TreeSidebar component — the root tree element plus its URL path. required
    .treeTreeElement
Root element of the tree. required readonly
    .pathAbsolutePath
URL path of the root — defaults to /. Children are rendered with path + their.name. readonly
Return
ReactNode
The sectioned sidebar — home/index links, a search input, and either the tree menu or search results.

Sidebar built from a tree element, in three sections separated by dividers.

  • Top: a "Home" link to the root and an "All elements" link to the <TreeIndexPage> (/all).
  • Middle: a <TextInput> search-as-you-type filter.
  • Bottom: the root's children as a <TreeMenuMapper> — swapped for a flat ranked list of results (capped at 20) while the search holds a query.

Child and result hrefs use each element's canonical path (or joinPath(parent, name) as a fallback). To customise child renderers wrap in <TreeMenuMapping mapping={…}> (same context as <TreeMenu>).

The default sidebar for a tree-based site: a single "home" link for the root element, followed by the root's children as a navigation menu. <TreeApp> mounts one of these automatically.

Things to know:

  • The home link uses path as its href (defaulting to /); children's hrefs are computed by appending their name to the root path.
  • The children render through the same mapper as <TreeMenu>, so customise them by wrapping in <TreeMenuMapping mapping={…}>.
  • Only directories, files, and kind: "module" symbols appear — code symbols are kept off the navigation.
  • Use it directly for finer layout control outside <TreeApp>.

Usage

tsx
import { TreeSidebar } from "shelving/ui";

// A home link + children menu combined — the default sidebar.
<TreeSidebar tree={root} />

Examples

<TreeSidebar tree={tree} />