NavTree

A composable tree navigation built from three components — the NavTree root, NavTree.Group, and NavTree.Item. Each tab below previews one of them; the props table follows the selected tab.

Props

Name

Details

Default

Control

width

'fill'| number| string

fill

Width: 'fill' (100% of the container — the default), a number (px), or any CSS length.

padding

number| string

—

Inner padding — a number (px) or any CSS shorthand.

margin

number| string

—

Outer margin — a number (px) or any CSS shorthand.

Also forwarded to the root element: class

Snippets

Name

Details

children

Snippet

Examples

Expandable folders

Selection state

The active state lives in this example's own script — click an item to select it.

Icons

A leading icon — a path to an SVG in /static, or raw SVG markup — sized to the item.

Sizes

xs / sm / md (default) — height, padding, gap, and font scale together (matching Button).