MindMap
The MindMap component renders interactive mind maps with a central root node and branching children. Choose between a radial layout (root at center, children fanning outward) or a tree layout (root at top, children branching downward).
Basic example
Tree layout
Use layout: tree for a top-down hierarchical view.
Many branches
Mind maps handle many top-level branches by distributing them evenly around the root.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
root | string | (required) | Label for the central root node |
children | MindMapNode[] | (required) | Array of child nodes (min 1) |
layout | 'radial' | 'tree' | 'radial' | Layout algorithm |
MindMapNode
| Property | Type | Default | Description |
|---|---|---|---|
label | string | (required) | Display text for the node |
children | MindMapNode[] | — | Optional nested child nodes |
Accessibility
- The SVG element has
role="img"with anaria-labeldescribing the root name and total node count. - A hidden nested
<ul>list replicates the full mind map tree structure for screen readers. - Nodes beyond 4 levels of depth are hidden visually and shown as a “+N more” badge, but remain accessible in the screen-reader list.